需求：根據瀏覽器語言自動切換語言

1.安裝vue-i18n,

yarn安裝

$ yarn add vue-i18n

npm安裝

$ npm install vue-i18n

2.匯入語言包

src下建立lang資料夾，定義zh.js,en.js……

zh.js

export default{
    part1 : {
            name:'姓名'，
            nation:'地區'
    }
     part2 : {
            gender:'性別'
    }
}

en.js

export default{
     part1 : {
            name:'name'，
            nation:'nation'
    }
     part2 : {
            gender:'gender'
    }
}
 

3.在src下建立一個資料夾tools，

定義兩個檔案，一個是i81n.js,一個是lang.js

4.i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

//匯入語言包
import Zh from '../lang/zh.js'; // 中文語言包
import En from '../lang/en.js'; // 英文語言包

const messages = {
         zh: Zh, // 中文語言包
         en: En, // 英文語言包
}

export default new VueI18n({
    locale: 'zh', // set locale 預設顯示中文
    fallbackLocale: 'en', //如果語言包沒有，則預設從英語中抽取
    messages: messages // set locale messages
});
 

5.lang.js

export default function lang() {
    let lang = navigator.language; //瀏覽器語言判斷
    lang = lang.substr(0, 2);
    switch (lang) {
        case 'zh': //中文
            lang = 'zh';
            break;
        case 'en': //英文
            lang = 'en';
            break;
        default:
            lang = 'en';
    }
    return lang;
}
 

6.main.js中匯入i18n.js以及lang.js

//引入多語言支援
import i18n from './tools/i18n.js'
import lang from './tools/lang.js'
window.lang = lang

new Vue({
  i18n,     //掛載i18n
  router,
  store,
  Axios,
  render: h => h(App)
}).$mount('#app')

7.使用

掛載到頁面

<p>{{$t('part1.name')}}</p>
<p>{{$t('part2.gender')}}</p>

js中使用

document.title = this.$t("part1.nation");

頁面使用語言

created: function() {
    //切換語言
    this.$i18n.locale = lang();
}

vue-i18n可能出現的問題