1. npm 安装
npm install vue-i18n
2. src/assets文件夹下穿件文件夹i18n，
然后再在i18n文件夹中创建langs文件夹和i18n.js文件，
最后再在langs文件夹下创建相应语言文件，我这里是cn.js中文文件，en.js英文文件。
如图所示（相应文件的代码在下面）：
3.main.js入口文件中导入，并在new Vue 实例中加上i18n：
import i18n from './assets/i18n/i18n' // 引入中英文语言翻译文件
new Vue({
el: '#app',
store,
router,
i18n,
components: { App },
template: '<App/>'
})
4.i18n.js文件中：
import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
import en from './langs/en'
import cn from './langs/cn'
// import tn from './langs/tn'
Vue.use(VueI18n)
const messages = {
en: en,
cn: cn,
// tn: tn
}
const i18n = new VueI18n({
locale: sessionStorage.getItem('changeLang') || 'cn', //从sessionStorage中拿到用户的语言选择，如果没有，那默认中文。
messages,
silentTranslationWarn: true,
})
// locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换
// Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
// })
export default i18n
5. cn.js文件中：
const cn = {
message: {
i1: '欢迎来到我的项目',
public: {
aaa: '你看不见我',
},
}
}
export default cn
6. en.js文件中：
const en = {
message: {
i1: 'Welcome to my project',
public: {
aaa: 'You dont see me',
},
}
}
export default en
7.Vuex 的store.js 文件中存储语言当前状态（没有安装vuex依赖的自己去安装）：
// 引入vue 和 vuex
import Vue from 'vue';
import Vuex from 'vuex';
// 使用vuex插件,跟router一样
Vue.use(Vuex);
// 直接导出 一个 Store 的实例
export default new Vuex.Store({
state: {
Language: sessionStorage.getItem('changeLang') ? sessionStorage.getItem('changeLang') : 'cn',
},
getters: {
},
// 同步操作直接修改state里面的数据
mutations: {
setLanguage: (state, data) => {
state.Language = data;
sessionStorage.setItem('changeLang', data);
},
}
});
8. 页面中使用：
1.文本格式：<div > {{$t('message.public.aaa')}} </div>
2.input的placeholder：<el-input type="text" v-model=" " autocomplete="off" :placeholder="$t('message.public.aaa')"></el-input>
3.data中：
data() {
var validateAccount = (rule, value, callback) => { // 验证规则
if (value === '') {
callback(new Error(this.$t('message.public.aaa')));
} else {
callback();
}
};
}
4.验证规则中使用，具体查看另一篇文档：https://www.cnblogs.com/xintao/p/11138500.html