Vue I18n 是 Vue.js 的國(guó)際化插件
NPM安裝 vue-i18n 插件
npm install vue-i18n
引入多語言插件 vue-i18n
在 main.js 中引入插件 vue-i18n惧笛，然后調(diào)用 vue.use()
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 創(chuàng)建實(shí)例 - 根據(jù)本地語言加載多語言文件
const i18n = new VueI18n({
locale: 'en', // 默認(rèn)語言 可以借助cookie來設(shè)置和獲取本地語言環(huán)境 從而加載不同的語言文件
messages: {
'zh': require('@/assets/lang/zh_CN'),
'en': require('@/assets/lang/EN'),
}
})
// 通過 `i18n` 選項(xiàng)創(chuàng)建 Vue 實(shí)例
new Vue({ i18n }).$mount('#app')
EN.js 文件內(nèi)容
module.exports = {
message: {
test: 'test',
}
}
zh_CN.js 文件內(nèi)容
module.exports = {
message: {
test: '測(cè)試',
}
}
插件在頁(yè)面中的使用
- 在 HTML 中使用方法
<p>{{ $t('message.test') }}</p>
- 在 JS 中使用方法
console.log(this.$t('message.test')); // this代表vue根實(shí)例
// 獲取當(dāng)前本地語言環(huán)境
var currentLanguage = this.$i18n.locale;
