i18n项目国际化

i18n国际化

----刚过完年，老板十万火急的告诉我，要把项目做成国际化（即：中英文切换）。。
打工人打工魂打工成为人上人，虽然咱之前没接触过i18国际化，但既然老板有需求，咱也得执行啊，要不饭碗不保，刚过完年就丢了饭碗，不吉利啊。。。（话不多说，开搞）
--------------------分割线----------------------
1.npm i vue-i18n --save-dev 下载i18n语言包

2.在main.js中导入挂载

3.在i18n文件夹中，创建lang文件夹，在lang文件夹中再创建两个js本地语言包文件(zh.js中文语言包，en.js英文语言包）

4.i18n中index.js中的代码配置：
import Vue from ‘vue’;
import Element from ‘element-ui’
import VueI18n from ‘vue-i18n’;

// 引入各个语言配置文件
import zh from ‘./lang/zh’;
import en from ‘./lang/en’;
// 创建vue-i18n实例i18n

Vue.use(VueI18n)
const i18n = new VueI18n({
// 设置默认语言
locale: localStorage.getItem(‘locale’) || ‘zh’, // 语言标识
// 添加多语言（每一个语言标示对应一个语言文件）
messages: {
zh,
en,
}
})

Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
});
// 暴露i18n
export default i18n;
//new Vue({ i18n }).$mount(’#app’)

5.语言包里的内容，都是一个个手写的（很苦逼），简单的例子，大家对照参考


两个语言包里的变量名必须一一对应

6.如何在代码中使用
template 中用法：

{{ $t("login.wms") }}

1 2 js 中的用法

// 使用语言
alert(this.$t{(}^{\prime }login.wm{s}^{\prime }))//切换语言，lang参数可为：cn/en/ko等this.$i18n.setUserLanguage(lang);