vue-i18n及ElementUI国际化配置步骤

1、vue-I18n使用

1.1、下载依赖

注意：vue2.0要用8版本的，使用9版本的会报错

npm install vue-i18n // 默认安装最新版本
    
npm i vue-i18n@8.27.0 -D //8版本
1
2
3

1.2、创建语言包文件

在src目录下，总共需要创建三个文件

• zh.js：存放所有的中文显示内容
• en.js：存放所有的英文显示内容
• index.js：用于配置i18n，并导出i18n

zh.js

export default { // 自行分类
  login:{
    login:'登录'
  }
}
1
2
3
4
5

en.js

export default {
  login:{
    login:'Log in'
  }
}
1
2
3
4
5

index.js

import Vue from 'vue'
// 引入自己的语言包
import chinese from "./zh"; // 中文
import english from "./en"; // 英文
// 国际化
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 配置i18n语言包
const messages = {
  zh: {
    ...chinese
  },
  en: {
    ...english
  }
}

// 国际化配置
const i18n = new VueI18n({
  locale: localStorage.getItem('lanague') || 'zh', // 默认中文
  messages
})

export default i18n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1.5、在main里导入语言包文件

// 国际化配置
import i18n from './lang'
 
// 挂载到vue上
new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App)
}).$mount('#app');
1
2
3
4
5
6
7
8
9
10

1.6、使用

// 模板中：
{{$t('login.login')}}
// js中
$t('login,.login')
1
2
3
4

1.7、切换语言

export default {
    methods:{
        changeLanguage(value){
			localStorage.setItem('lanague',value); // 这样页面刷新就不会改变选择的语言了
			this.$i18n.locale = value
		},
    }
}
1
2
3
4
5
6
7
8

2、ElementUi国际化设置

element ui配置很简单，可以去官网查看：https://element.eleme.cn/#/zh-CN/component/i18n

我这里使用的是兼容 vue-i18n@6.x的

2.1、在上面创建的lang/index.js目录下进行修改即可

import Vue from 'vue'
// 引入自己的语言包
import chinese from "./zh"; // 中文
import english from "./en"; // 英文

// element ui 国际化
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
// 国际化
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 配置i18n语言包
const messages = {
  en: {
    ...english,
    ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
  },
  zh: {
    ...chinese,
    ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
  }
}

// 国际化配置
const i18n = new VueI18n({
  locale: 'zh', // 默认中文
  messages,
  silentTranslationWarn: true,
})

// vue配置
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})

export default i18n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

3、注意事项

3.1、检查方法调用

因为我们会在页面用到中文的地方全部换为使用[this.]$t('common.xxx')，可能会在html里面用，也可能会在Js里面用，所以可能会会因为粗心，导致调用方法的时候，参数没有带引号，像这样[this.]$t(common.xxx)。这样是会报错的。

解决办法

打开VScode，然后在左侧全局搜索中，根据正则表达式\$t\([^'"].+[^'"]\)进行全局搜索即可

3.2、检查翻译文件缺少的内容

我们编写的时候，每个语言会对应一个js文件，项目大的话一个js文件里面可能有上千行，也极大可能不只是一个人在开发，需要进行代码合并，在合并的过程中有可能少合并一些，或者在编写的时候，由于粗心，两个js里面相同意思的单词写错了。

解决办法

在最外层lang目录下，创建util文件夹，里面创建checkHasKey.js

// 先在package.json里添加 "type":"module", 属性(用于在node环境中使用import语句)，不要重启项目和提交这个代码(会报错)
// 在控制台执行 node ./src/lang/util/checkHasKey.js，即可查看漏掉的属性
// 或者使用vsCode左侧菜单栏的运行和调试->上方选择Run Current File(建议，会自动清空调试控制台内容，并且会有颜色区分)
import zh from "../lang/zh.js";
import en from "../lang/en.js";

// console.log(zh);
// console.log(en);

// 比较两个对象之间的差别属性名（跟值没关系）
function printDifferenceForObject(mainObj,obj2){
  const mainObjWapperKeys = Object.keys(mainObj)
  mainObjWapperKeys.forEach(wapperKey => {
    // 如果有外层属性(组件名称)
    if(obj2[wapperKey]){
      // 如果是对象，才遍历
      if(mainObj[wapperKey] instanceof Object){
        const mainObjInnerKeys = Object.keys(mainObj[wapperKey])
        if(mainObjInnerKeys.length > 0){
          mainObjInnerKeys.forEach(innerKey => {
            // 如果没内层属性(组件里面的中文)
            if(!obj2[wapperKey][innerKey]) console.log("比较对象有，被比较对象没有的内层属性(其外层属性为："+wapperKey+")：",innerKey);
          })
        }
      }
    }else{
      console.error("比较对象有，被比较对象没有的外层属性：",wapperKey);
    }
  })
}

console.log('======================下面是中文文件里，英文文件没有的======================');
printDifferenceForObject(zh,en);
console.log('======================下面是英文文件里，中文文件没有的======================');
printDifferenceForObject(en,zh);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

结果