第一步
安裝i18n插件。
npm install vue-i18n
第二步
在src目錄下，創(chuàng)建一個(gè)【language】文件夾，并創(chuàng)建兩個(gè)語(yǔ)言包js文件。
中文語(yǔ)言包：【zh.js】
英文語(yǔ)言包：【en.js】
第三步
完善en.js文件和zh.js文件。兩個(gè)文件的結(jié)構(gòu)要相同。如果用Element-UI，這里導(dǎo)入。
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' : '首頁(yè)'
},
'button': {
'login': '登陸'
},
'table' : {
},
'detail' : {
},
...zhLocale
}
export default zh
第四步
在main.js引入插件。
//i18n插件
import VueI18n from 'vue-i18n';
// element-ui多語(yǔ)言文件
import locale from 'element-ui/lib/locale';
// 本地多語(yǔ)言文件
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');
第五步
在頁(yè)面上使用和切換。
使用：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-552537.html
<el-button type="primary" @click="submitForm()">{{$t("button.login")}}</el-button>
切換：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-552537.html
switchLanguage() {
//先獲取當(dāng)前語(yǔ)言,
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');
}
}
到了這里，關(guān)于Vue實(shí)現(xiàn)多語(yǔ)言（i18n）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
