VUE2国际化

1，安装vue-i18n插件,9版本以上vue3用的

npm install vue-i18n@8 --save

2，src目录，新建lang文件夹

en.js

export default {
    test: {
        login: "login"
    }
}

zh.js

export default {
    test: {
        login: "登录"
    }
}

index.js

import Vue from 'vue';
import VueI18n from 'vue-i18n'
import elementuiEn from "element-ui/lib/locale/lang/en";
import elementuiZh from "element-ui/lib/locale/lang/zh-CN";
import en from './en'
import zh from './zh'

Vue.use(VueI18n);

const messages = {
    en: Object.assign(en, elementuiEn),
    zh: { ...zh, ...elementuiZh }
}

localStorage.setItem('locale', 'zh')
const i18n = new VueI18n({
    locale: localStorage.getItem('locale') || "zh",
    messages
})


export default i18n;

3，最后在main.js引入

import i18n from './lang/index.js'

Vue.use(ElementUI);

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#child1')

4，如果需要切换中文需要用到locale

import ElementLocale from 'element-ui/lib/locale'
ElementLocale.i18n((key, value) => i18n.t(key, value))
//切换的时候改变this.$i18n.locale的值即可
this.$i18n.locale = localStorage.getItem('locale')

5，使用

<div>{{$t('test.login')}}</div>