vue-i18n安裝配置,執行
阿新 • • 發佈:2018-12-06
需求:根據瀏覽器語言自動切換語言
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();
}