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>