[email protected] 国际化中英文切换

公司做的系统终于要走出国门了！于是我写了一套英文版系统，使用vue-i18n插件，ui库为element,现在把坑和步骤记录一下。

一、下载插件

npm install vue-i18n --save

二、把i18n配置之后导出挂载在Vue下

如图建立一个i18n文件夹，index.js写配置,config写语言包。

//en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
  select:'Please select',
  ...enLocale
}
export default en;

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const zh = {
  select:'请选择', 
  ...zhLocale
}
export default zh;

其中...enLocale和...zhLocale是引入element的语言包。

//index.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
import ElementLocale from 'element-ui/lib/locale';
// 引入各个语言配置文件
import zh from './config/zh';
import en from './config/en';
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
    // 设置默认语言
    locale: localStorage.getItem('locale') || 'zh', // 语言标识
    messages: {
        zh,
        en,
    },
})
ElementLocale.i18n((key, value) => i18n.t(key, value))
// 暴露i18n
export default i18n;

结束。