第一步
安装i18n插件。
npm install vue-i18n
第二步
在src目录下,创建一个【language】文件夹,并创建两个语言包js文件。
中文语言包:【zh.js】
英文语言包:【en.js】
第三步
完善en.js文件和zh.js文件。两个文件的结构要相同。如果用Element-UI,这里导入。
en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
'system' : {
'home' : 'Home'
},
'button': {
'login': 'Login'
},
'table' : {
},
'detail' : {
},
...enLocale
}
export default en
zh.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const zh = {
'system' : {
'home' : '首页'
},
'button': {
'login': '登陆'
},
'table' : {
},
'detail' : {
},
...zhLocale
}
export default zh
第四步
在main.js引入插件。
//i18n插件
import VueI18n from 'vue-i18n';
// element-ui多语言文件
import locale from 'element-ui/lib/locale';
// 本地多语言文件
import zh from "./language/zh";
import en from "./language/en";
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: sessionStorage.getItem('locale') || 'zh',
messages: {
zh: zh,
en: en
}
});
locale.i18n((key, value) => i18n.t(key, value))
new Vue({
router,
i18n,
render: h => h(App)
}).$mount('#app');
第五步
在页面上使用和切换。
使用:
<el-button type="primary" @click="submitForm()">{{$t("button.login")}}</el-button>
切换:
switchLanguage() {
//先获取当前语言,
var locale = sessionStorage.getItem('locale') || 'zh';
if(locale == 'en') {
this.$i18n.locale = 'zh';
sessionStorage.setItem('locale','zh');
} else {
this.$i18n.locale = 'en';
sessionStorage.setItem('locale','en');
}
}