一、安装。
npm install vue-i18n
二、使用。(这里只写了核心代码)
main.js引入:
// 引入插件和语言包
import VueI18n from 'vue-i18n'
import zh from '@/i18n/langs/zh'
import en from '@/i18n/langs/en'
Vue.use(VueI18n);
中文配置,i18n/langs/zh.js,zh文件:
export default {
placeStopOrder:"下止损单",
}
英文配置,i18n/langs/zh.js,en文件:
export default {
placeStopOrder:"Place Stop Order",
}
main.js,使用:
// 自动设置多语言 默认选择浏览器系统语言
const navLang = navigator.language; //判断当前浏览器使用的语言
const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false;
let lang = localStorage.getItem('language') || localLang || 'en-US'; //如果有缓存,取缓存的语言
const i18n = new VueI18n({
locale: lang,
messages:{
'zh': zh, // 中文语言包
'en': en // 英文语言包
},
silentTranslationWarn: true
});
localStorage.setItem('language',lang); //最后缓存当前使用的语言
main.js,注册并挂载:
window._vm = new Vue({
router,
store,
i18n, //注意
render: h => h(App)
}).$mount('#app');
“window._vm”:将new实例挂载到window,方便其他单独js文件中获取语言。
三、切换语言。
切换语言的核心代码:
//切换语言
changeLanguage(lang){
this.$i18n.locale = lang;
localStorage.setItem('language',lang);
}
调用时,中文传:'en-US',英文传:'zh-CN',跟配置的时候一致就行了。
说明:先将内存的语言修改了,代码:this.$i18n.locale = lang;再将缓存的语言也修改了。
四、获取。
普通的页面渲染时:
<div>{{$t("placeStopOrder")}}</div>
当在某个js配置文件中时,没有this:
_vm.$t("placeStopOrder");
五、动态添加中英文(不需要此功能可以忽略)。
如果数据是从后端获取的,那么需要动态添加中英文,方法如下。
this.$i18n.mergeLocaleMessage('en',{language:'Language'}) //添加英文
this.$i18n.mergeLocaleMessage('zh',{language:'语言'}) //添加中文
res.data为后端返回的数据。
步骤简单,不说废话浪费大家阅读的事件。如果有什么其他问题,请跟我私信或者是评论。
官方网址:API参考 - VueI18n 类 - 《Vue I18n v8.x 使用手册》 - 书栈网 · BookStack