i18n：i18n是 Internationalization 這個英文的簡寫，即國際化的意思，vue-i18n是一款針對於vue開發的國際化外掛,讓專案支援多語言切換，以適應不同地區使用者的需求。

安裝vue-i18n：

npm install vue-i18n --save

main.js中全域性引入i18n

import VueI18n from "vue-i18n";

註冊：

Vue.use(VueI18n);

例項化i18n並引入語言檔案：

const i18n = new VueI18n({
  locale: "en",//語言標識
  messages: {//配置多語言 根據自己的專案需求  這裡配置了中文和英文
 

    'zh': require('@/lang/zh.js'),//中文
    'en': require('@/lang/en.js'),//英文
  },
  fallbackLocale: "zh",//沒有英文的時候預設 中文語言
  silentTranslationWarn: true,//報錯時加上這個引數可以取消警告
  //this.$i18n.locale // 通過切換locale的值來實現語言切換
});

在vue例項中註冊：

let VM = new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

src/lang/zh.js：

module.exports = {
    name:"小明",
    m:{
        a:"哈哈哈",
        b:"嗯嗯呢"
    }
}

src/lang/en.js：

module.exports = {
    name:"xiaoming",
    m:{
        a:"hahaha"
    }
}

頁面中使用：

        <h1>{{$t('name')}}</h1>
        <h1>{{$t('m.a')}}</h1>
        <h1>{{$t('m.b')}}</h1>
        <button @click="toggleLang">語言切換</button>

動態切換多語言：

        toggleLang(){
            if(this.$i18n.locale == 'en'){
                this.$i18n.locale = 'zh'
            }else{
                this.$i18n.locale = 'en'
            }
        }

如何根據瀏覽器語言 動態載入 成對應的多語言？

import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: "en",//語言標識
  messages: {},//
  fallbackLocale: "zh",//沒有英文的時候預設 中文語言
  silentTranslationWarn: true,//報錯時加上這個引數可以取消警告
  //this.$i18n.locale // 通過切換locale的值來實現語言切換
});
let navigatorLanguage = (navigator.language || navigator.browserLanguage).toLowerCase(); //常規瀏覽器語言和IE瀏覽器
navigatorLanguage = navigatorLanguage.substr(0, 2); //擷取lang前2位字元
function loadI18nMessages(lang) {
  return import(`@/lang/${lang}`).then(msg => {
    i18n.setLocaleMessage(lang, msg.default);
    i18n.locale = lang;
    return Promise.resolve();
  });
}
loadI18nMessages(navigatorLanguage);


Vue.config.productionTip = false;

let VM = new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

export default VM;

由於現在變成了import引入語言包的形式，所以每個語言包的匯出方式也應該變成es6的匯出形式

從原來的module.exports = {} 變成 export default {}

比如src/lang/zh.js

export default  {
    name:"小明",
    m:{
        a:"哈哈哈",
        b:"嗯嗯呢"
    }
}

根據瀏覽器語言動態載入語言包 可以避免載入所有的語言包，因為只加載了一種語言包，所以就不能手動切換到其它語言了

。