2024年最新教你如何在vue中使用国际化i18n插件_vue使用i18n，前端高级开发

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

import Vue from 'vue'
import i18n from "./src/i18n/index.js"
new Vue({
    i18n
})

那么如何在视图中呈现呢，其实也很简单，我们只需要在插值中使用

$t

这个函数就可以了

<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>

最终展示的效果是

<div id="app">
 <p>hello world</p>
</div>

是不是很简单，当然这是咱们对i18n最基础的使用，如果想要更深入的使用，可以查看

开始 | Vue I18n​kazupon.github.io

2、在vue-cli项目中使用

2.1、创建i18n文件结构

我们首先在项目中

src

目录下建立一个叫做i18n的文件夹，路径为

/src/i18n

当前的例子只提供两种语言(多了写的累-_-||)，分别是

en英文

和

zh中文

，格式如下建立就可以了，我们秉承着高内聚低耦合的思路，所以把原本i18n实例中

messages

中的属性进行模块化拆分为两个文件，如下图，都放置在

config

文件夹中

2.2、config中两个文件的内容定义

en.js

和

zh.js

我们可以先定义一些内容

en.js

export default {
    table: {//假如用于翻译表格
        date: "Date",
        name: "Name",
        address: "Address"
    },
    menu: {},//假如项目中日后还有菜单
    tabs: {}//tab切换等
}

zh.js

export default {
    table: {
        date: "日期",
        name: "姓名",
        address: "地址"
    },
    menu: {},
    tabs: {}
}

2.3、配置i18n文件夹下的index.js文件

目前我们已经对两个js文件进行了配置，接下来，我们来配置下

/src/i18n/index.js

文件，我们在开发过程中都知道，如果一个路由或者api有很多内容都写在一个文件，容易造成维护灾难，继续秉承高内聚低耦合的思路，我们和对项目中的路由或者api进行model划分，本文中的两个语言配置

en

和

zh

也是划分模块，但是如果我们有

20几个国家

的语言需要翻译，我们在index中一个一个的

import

显然对开发效率来书是中灾难，我们的代码可能这样

import en from './config/en'
import id from './config/id'
import ja from './config/ja'
import ae from './config/ae'
import am from './config/am'
import ca from './config/ca'
import al from './config/al'
.....

为了解决这个问题，本文采用了

webpack

中的

require.context

方法来解决这个问题

2.4、使用require.context()

require.context

是webpack提供的方法，用这个方法我们可以批量引入我们想要的文件，

require.context

可以返回一个具有 resolve， keys， id 三个属性的方法

1. resolve() 它返回请求被解析后得到的模块 id
2. keys() 它返回一个数组，由所有符合上下文模块处理的请求组成
3. id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

这个方法接受3个参数

1. dir传入一个目录进行搜索
2. child是否要搜索子目录
3. regExp传入正则表达式来匹配哪些文件需要引入

let langFiles = require.context("./config", false, /\.js$/);

当我们调用

kes()

方法的时候可以得到如下属性

let langFiles = require.context("./config", false, /\.js$/);
console.log(langFiles.keys())//["./cn.js","./zh.js"]

以上便是

require.context

的简单使用，如果想要知道更详细的用法，那我后续会再开一期关于

require.context

的专题，敬请期待

**2.5、继续配置

/src/i18n/index.js

**

下面的代码中我使用了一个正则表达式

let reg = /^\.\/([^\.]+)\.([^\.]+)$/ //正则用于匹配文件名

用这个正则的目的是为了，我们需要将数据处理成这样

{
    zh:{...}，
    en:{...}
}

处理成这种

i18n

中

message

属性对应的数据模式，我们通过

forEach

获取下来的

key

是这种类型的

./zh.js

使用正则的目的就是截取其中的

zh

两个字符，然后生成复合

message

属性的数据模型

import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)//注入到所有的子组件

//require.context(path，deep，regExp)
//有3个方法 分别是keys() 

let langFileds = require.context('./config'， false， /\.js$/)

let regExp = /\.\/([^\.\/]+)\.([^\.]+)$/ //正则用于匹配 ./en.js中的'en'

// regExp.exec('./en.js')

let messages = {} //声明一个数据模型，对应i18n中的message属性

langFileds.keys().forEach(key => {
    let prop = regExp.exec(key)[1] //正则匹配en|zh这样的值
    //messages[prop]相当于 messages['en'] = {table:{...}}
    messages[prop] = langFileds(key).default

})
console.log(messages);
console.log(langFileds('./en.js'));

let locale = localStorage.getItem('lang') || "zh" //从localstorag中获取

export default new VueI18n({
    locale，//指定语言字段
    messages//定义语言字段
})

2.6、修改main.js

下面我们将i18n挂载在main的Vue实例，本案例中也引入了element-ui，如果想要使用element-ui，需要先安装

yarn add element-ui

接下来根据自己的需求编写代码

import Vue from 'vue'
import App from './App.vue'
import ElementUI from "element-ui" //element-ui
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)

import i18n from "./i18n" //

new Vue({
  render: h => h(App),
  i18n //挂载
}).$mount('#app')

**2.7、 App.vue视图展示(

navigator.language

)**

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

**2.7、 App.vue视图展示(

navigator.language

)**

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-WQ9Bu7yZ-1715081407554)]