vue 使用vue-i18n实现中英文语言切换，以及动态添加中英文

一、安装。

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