i18n在vue項目中使用

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:"嗯嗯呢"
    }
}

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

 

 

。