1莫其、安裝 vue-i18n
npm install vue-i18n
2、注入 vue 實(shí)例中，項(xiàng)目中實(shí)現(xiàn)調(diào)用 api 和 模板語(yǔ)法
這邊我是順著使用 npm 安裝依賴進(jìn)行互捌。先在 main.js 中引入 vue-i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通過(guò)插件的形式掛載
const i18n = new VueI18n({
locale: 'zh-CN', // 語(yǔ)言標(biāo)識(shí)
//this.$i18n.locale // 通過(guò)切換locale的值來(lái)實(shí)現(xiàn)語(yǔ)言切換
messages: {
'zh-CN': require('./common/lang/zh'), // 中文語(yǔ)言包
'en-US': require('./common/lang/en') // 英文語(yǔ)言包
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
i18n, // 不要忘記
store,
router,
template: '<App/>',
components: { App }
})
上面的代碼正式將 vue-i18n 引入 vue 項(xiàng)目中遗契，創(chuàng)建一個(gè) i18n 實(shí)例對(duì)象辐棒，方便全局調(diào)用。我們通過(guò) this.$i18n.locale 來(lái)進(jìn)行語(yǔ)言的切換牍蜂，同樣的我這邊的例子里就是通過(guò)點(diǎn)擊事件漾根，點(diǎn)擊‘’網(wǎng)易云音樂(lè)‘’，來(lái)觸發(fā)事件鲫竞，切換locale 的值辐怕。
3、ok, 引入的事情就是這樣从绘，那么既然實(shí)現(xiàn)國(guó)際化寄疏，這邊簡(jiǎn)單的是中英文切換，那么自然我們需要中英文兩套語(yǔ)言的文件顶考，vue-i18n中相對(duì)簡(jiǎn)單赁还，只需要兩個(gè) js 文件，通過(guò) require 的形式引入到 main.js驹沿。
zh.js中文語(yǔ)言包
export const m = {
music: '網(wǎng)易云音樂(lè)',
findMusic: '發(fā)現(xiàn)音樂(lè)',
myMusic: '我的音樂(lè)',
friend: '朋友',
musician: '音樂(lè)人',
download: '下載客戶端'
}
最后我們只需要通過(guò)觸發(fā)事件的形式艘策，來(lái)控制 locale 的值，去調(diào)用對(duì)應(yīng)的語(yǔ)言包就可以實(shí)現(xiàn)國(guó)際化啦渊季。
4朋蔫、組件中如何去切換 locale 的值，實(shí)現(xiàn)語(yǔ)言切換却汉。
locale: 'zh-CN', // 語(yǔ)言標(biāo)識(shí)
messages: {
'zh-CN': require('./common/lang/zh'), // 中文語(yǔ)言包
'en-US': require('./common/lang/en') // 英文語(yǔ)言包
}
在 main.js 中的代碼中驯妄，可以看到，當(dāng) locale 的值為‘zh-CN’時(shí)合砂，版本為中文青扔；當(dāng) locale 的值為‘en-US’,版本為英文。當(dāng)然你也可以換成 zh 和 en翩伪，這個(gè)不固定微猖，只需要對(duì)應(yīng)上。
好了缘屹，現(xiàn)在來(lái)看一下凛剥，我組件中的一個(gè)點(diǎn)擊事件中如何進(jìn)行切換。
/**
* 切換語(yǔ)言
*/
changeLangEvent() {
this.$confirm('確定切換語(yǔ)言嗎?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if ( this.lang === 'zh-CN' ) {
this.lang = 'en-US';
this.$i18n.locale = this.lang;//關(guān)鍵語(yǔ)句
}else {
this.lang = 'zh-CN';
this.$i18n.locale = this.lang;//關(guān)鍵語(yǔ)句
}
}).catch(() => {
this.$message({
type: 'info',
});
});
}
這邊的重點(diǎn)就是轻姿，點(diǎn)出的‘’關(guān)鍵語(yǔ)句‘’：this.$i18n.locale,當(dāng)你賦值為‘zh-CN’時(shí)犁珠，導(dǎo)航欄就變成中文逻炊；當(dāng)賦值為 ‘en-US’時(shí)，就變成英文犁享。效果圖就是文章前面的樣子余素。
5、到這饼疙，前端 vue-i18n 國(guó)際化插件在 vue-cli 模塊化環(huán)境中的開發(fā)實(shí)踐就全部完成了溺森。
6、vue-i18n 數(shù)據(jù)渲染的模板語(yǔ)法
我們知道 vue 中對(duì)于文字?jǐn)?shù)據(jù)的渲染窑眯，有以‘’{{}}‘’或者 v-text屏积、v-html等的形式，同樣的使用國(guó)際化后磅甩，依舊可以沿用炊林，但需要一點(diǎn)修改。
v-text:
<span v-text="$t('m.music')"></span>
{{}}:
<span>{{$t('m.music')}}</span>
如果要使用到組件的data中 使用this.$t('m.xxxx')
data() {
return {
pohonePlaceholder: this.$t('m.course_input_answer')
}
}
字組件根據(jù)父組件傳來(lái)的props設(shè)置default值
data () {
return {
default:this.$t('m.create_pls_chooes')
}
},
props: {
placeholder: {
type: String,
default: this.default
}
}
如果要js里面使用的話有兩種方式
第一種：直接this.$t('m.xxx')
第二種： 如果在外配置i18n（不在main）
可以引入配置的這個(gè)文件
import i18n from '@/common'
i18n.t('m.common_title')
vant ui 配置國(guó)際化環(huán)境
Vant 通過(guò) Locale 組件實(shí)現(xiàn)多語(yǔ)言支持卷要，使用 Locale.use 方法可以切換當(dāng)前使用的語(yǔ)言渣聚。
import { Locale } from 'vant';
import enUS from 'vant/lib/locale/lang/en-US';
// 設(shè)置為英文
Locale.use('en-US', enUS);
直接設(shè)置此，vant ui 全局的文字都會(huì)變?yōu)橛⑽?/p>
在vue項(xiàng)目的js里使用
import i18n from '@/common'
title: i18n.t('m.common_title'),
通過(guò).t方法來(lái)調(diào)用僧叉，但是注意奕枝，在頁(yè)面內(nèi)進(jìn)行語(yǔ)言切換并不會(huì)跟隨改變
路由的標(biāo)題跟隨多語(yǔ)言變化、路由定義的時(shí)候
{
path: '/login',
name: 'Login',
component: Login,
meta: {
title: {
en: 'Login',
zh: '登錄',
es: 'Iniciar sesión'
}
}
}
在main根據(jù)變化替換拿到title瓶堕，根據(jù)當(dāng)前的值來(lái)判斷獲取
router.afterEach((to, from) => {
// console.log('afterEach')
// 路由發(fā)生變化修改頁(yè)面title
var type = i18n.locale
if (to.meta.title) {
// document.title = to.meta.title
if(type === 'zh-CN') {
document.title = to.meta.title.zh
} else if(type === 'en-US') {
document.title = to.meta.title.en
} else if(type === 'es') {
document.title = to.meta.title.es
}
}
})
但是在切換按鈕的時(shí)候不會(huì)跟隨變化隘道，所以切換頁(yè)面要手動(dòng)更改一下title，根據(jù)點(diǎn)擊改變當(dāng)前頭
document.title = this.$route.meta.title.zh
