i18n國際化使用教程
阿新 • • 發佈:2020-12-11
第一步:
首先在自己的專案中安裝 vue-i18n依賴包。這裡使用NPM進行安裝,安裝方法如下:
npm install vue-i18n --save-dev
第二步:
將i18n引入vue例項中,在專案中實現呼叫API和模板語法。現在在main.js中引入 vue-i18n。如下:
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App' import router from './router' import VueI18n from 'vue-i18n' //引入vue-i18n Vue.use(ElementUI); Vue.use(VueI18n); //通過外掛的形式掛載 Vue.config.productionTip = false; /*---------使用語言包-----------*/ const i18n = new VueI18n({ locale: 'zh-CN', // 語言標識 //this.$i18n.locale // 通過切換locale的值來實現語言切換 messages: { 'zh-CN': require('./common/lang/zh'), // 中文語言包 'en-US': require('./common/lang/en') // 英文語言包 } }); /* eslint-disable no-new */ new Vue({ el: '#app', i18n, //掛載到例項,一定得在這個位置,而不是comonents中 router, components: { App }, template: '<App/>' })
第三步:
接下來我們就需要新建兩個js檔案(或者josn檔案)作為語言包。
其中en.js語言包中程式碼為:
module.exports = {
message: {
Language: 'Language',
zh: 'Chinese',
en: 'English'
}
}
其中zh.js語言包中程式碼為:
module.exports = {
message: {
Language: '語言',
zh: '中文',
en: '英文'
}
}
最後我們只需要通過觸發事件的形式,來控制 locale 的值,去呼叫對應的語言包就可以實現國際化啦。
第四步:
元件中觸發事件切換 locale 的值,從而實現語言的切換。template程式碼如下:
<div class="lang"> <div class="change-lang" @click="changeLangEvent()">{{changeLang}}</div> <ul> <li>{{$t('message.Language')}}</li> <li>{{$t('message.zh')}}</li> <li>{{$t('message.en')}}</li> </ul> </div>
scrpit程式碼如下:
data () {
return {
lang: 'zh-CN',
changeLang: '切換English',
}
},
methods: {
changeLangEvent() {
if (this.changeLang == '切換English') {
this.changeLang = '切換中文';
} else {
this.changeLang = '切換English';
}
if (this.lang === 'zh-CN') {
this.lang = 'en-US';
this.$i18n.locale = this.lang;
} else {
this.lang = 'zh-CN';
this.$i18n.locale = this.lang;
}
},
},
注意:由於 JavaScript 的限制,Vue 不能檢測當前變動的陣列,只渲染一次,如果資料不更新檢視就不更新的元件,如果切換語言則需要更新一下資料才能切換元件內的多語言。
第五步:
vue-i18n資料渲染的模板語法,模板語法暫時分為三種:
//vue元件模板的使用
<div>{{$t('message.zh')}}</div>
//vue元件模板資料繫結的使用
<input :placeholder="$t('message.zh')"></input>
//vue元件data中賦值的使用
data:{
msg:this.$t('message.zh');
}