一個大系統(tǒng)從單語言版本轉(zhuǎn)向國際化席噩，需要的花費大量的人力羽利。如果是將語言設(shè)置在同一個文件球榆，所有人都在不同時間點修改肌毅，沖突合并泡垃，每個人在沒有統(tǒng)一規(guī)范的情況下對英文key和value的命名不同盹沈，導(dǎo)致就算合并還要去找對方溝通潮售。就需要一種既支持全局刘陶，又支持單頁面語言包配置的方案请契。
【CLI3構(gòu)建的項目】
如果你是用cli3構(gòu)建的項目咳榜，可以使用以下命令便捷安裝配置i18n
https://www.npmjs.com/package/vue-cli-plugin-i18n
vue add i18n
安裝過程會出現(xiàn)以下信息確認(rèn)
【默認(rèn)語言】? The locale of project localization.
【備選語言】? The fallback locale of project localization.
//fallbackLocale 這個參數(shù)是指當(dāng)當(dāng)前語言包內(nèi)找不到對應(yīng)key的時候去備選的語言包里面匹配
例如：{{$t('message')}}
查找順序 ：當(dāng)前vue文件內(nèi)的<i18n> >> 當(dāng)前語言包 >> 備選語言包 >> $t內(nèi)的內(nèi)容（message）
【語言包地址】? The directory where store localization messages of project. It's stored under `src` directory.
【單個文件支持語言設(shè)置】? Enable locale messages in Single file components ?
安裝完成項目會新增或者修改以下幾個文件
i18n文件.jpg
重點在第四個選項，【單個文件支持語言設(shè)置】,什么是單個語言設(shè)置姚糊，看下面這段代碼（true）
<!--
* @Descripttion:
* @version:
* @Author: chenxch
* @Date: 2019-08-22 23:02:53
* @LastEditors: chenxch
* @LastEditTime: 2019-11-13 01:26:35
-->
<template>
<div>
這是動態(tài)路由<br>
當(dāng)前語言：{{$i18n.locale === 'zh' ? '中文' : '英文'}}<br>
<button @click="$root.$i18n.locale = 'zh'">中文</button>
<button @click="$root.$i18n.locale = 'en'">英文</button>
{{$t('message')}}
{{$t('xc')}}
</div>
</template>
<script>
export default {
name: 'Xc',
data()
return {
list:[this.$t('xc')]
}
}
</script>
<i18n>
{
"zh":{
"xc": "喬巴兄"
}
}
</i18n>
i18n切換.gif
這是在vue文件里面通過<i18n>標(biāo)簽去定義語言包贿衍，通過loader編譯成語言包
注意
切換的時候一定要切換this.$root.$i18n.locale,如果是切換this.$i18n.locale會出現(xiàn)只切換了當(dāng)前頁面下<i18n>內(nèi)的內(nèi)容。
【非CLI3構(gòu)建的vue項目】
首先需要安裝vue-i18n讓項目支持中英文
npm install vue-i18n
安裝完成后在入口文件內(nèi)配置
import VueI18n from 'vue-i18n';
import zh from '@/src/locales/zh';//引入本地語言包救恨，自己新建
import en from '@/src/locales/en';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'zh', // 語言標(biāo)識
// this.$i18n.locale // 通過切換locale的值來實現(xiàn)語言切換
messages: {
zh: {
message: '你好',//
...zh
}, // 中文語言包
en: {
message: 'hello',
...en
} // 英文語言包
}
});
new Vue({
i18n,
router,
store,
render: h => h(App)
}).$mount('#app');
全局國際化解決了贸辈，單頁面國際化還需進行以下操作
通過上面案例可以發(fā)現(xiàn)單頁面（局部）國際化是通過<i18n>標(biāo)簽，這個標(biāo)簽需要通過vue-i18n-loader去編譯肠槽。
@kazupon/vue-i18n-loader
npm install @kazupon/vue-i18n-loader --save-dev
不同文件修改如下：
【webpack.base.js】
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
i18n: '@kazupon/vue-i18n-loader'
}
}
},
// ...
]
【vue.config.js】
config.module
.rule('i18n')
.resourceQuery(/blockType=i18n/)
.type('javascript/auto')
.use('i18n')
.loader('@kazupon/vue-i18n-loader')
或者參照cli3的
module.exports = {
pluginOptions: {
i18n: {
locale: 'zh',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: true
}
}
}
【js文件使用i18n】
import i18n from './i18n';
export function testFun(){
retrun i18n.t('message');
}
