需求
項目基于Vue進(jìn)行開發(fā)友驮，使用了ant-design-vue框架，然后需要做國際化驾锰。此時做國際化需要考慮兩方面的國際化卸留，一個是ant-design-vue內(nèi)部組件的國際化，一個是國際化我們的業(yè)務(wù)顯示椭豫，業(yè)務(wù)顯示我們選用vue-i18n進(jìn)行國際化耻瑟。
安裝依賴
# 安裝ant-design-vue
npm i --save ant-design-vue
# 安裝vue-i18n
npm install vue-i18n --save
建國際化文件
在src包下新建common文件夾，在common文件夾中建子文件夾lang赏酥，并新建en-us.js和zh-cn.js喳整，目錄結(jié)構(gòu)如下：
文件內(nèi)容如下：
en-us.js
module.exports = {
title: {
home: 'home',
message: 'message',
code: 'code'
}
}
zh-cn.js
module.exports = {
title: {
home: '首頁',
message: '信息',
code: '技術(shù)評估'
}
}
注:國際化文件中，以Key-Value對應(yīng)的格式裸扶，中文和英文國際化的key保持一致框都，只是value不同而已
引用
在main.js中引入ant-design-vue和vue-i18n，以及建好的國際化文件呵晨。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import VueI18n from 'vue-i18n'
import LangENUS from './common/lang/en-us'
import LangZHCN from './common/lang/zh-cn'
Vue.config.productionTip = false
Vue.use(Antd)
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh-cn',
messages: {
'en-us': LangENUS,
'zh-cn': LangZHCN
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
i18n,
components: { App },
template: '<App/>'
})
國際化使用
解決ant-design-vue組件國際化
在ant-design的官網(wǎng)上可以看見魏保，ant-design默認(rèn)組件的語言方式是英文的蔗蹋，可以通過LocaleProvider來解決
解決vue-i18n國際化
我們在main.js中注冊掛載了i18n后，通過this.$i18n.locale = **囱淋，就可以設(shè)置語言猪杭。
在app.vue中進(jìn)行設(shè)置
根據(jù)上文的講解，我們需要在app.vue中進(jìn)行設(shè)置妥衣。關(guān)鍵點如下：
- 使用a-locale-provider包裹所有元素皂吮，是為了解決ant-design-vue的組件國際化。
- 使用this.$i18n.locale = **税手，可以設(shè)置語言
- 采取的交互方式是蜂筹，默認(rèn)是中文，頁面顯示按鈕為英文芦倒，點擊后切換成英文艺挪，按鈕顯示成中文。
<template>
<a-locale-provider :locale="locale">
<div id="app">
<div>
<button @click="changeLocale('en-us')" v-show="localeval=='zh-cn'">English</button >
<button @click="changeLocale('zh-cn')" v-show="localeval=='en-us'">中文</button >
</div>
<router-view/>
</div>
</a-locale-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
const EN = 'en-us'
const ZH = 'zh-cn'
export default {
name: 'App',
data () {
return {
locale: zhCN,
localeval: 'zh-cn'
}
},
methods: {
moment,
changeLocale (localeval) {
this.localeval = localeval
if (localeval === EN) {
moment.locale(EN)
this.$i18n.locale = EN
this.locale = null
} else {
moment.locale(ZH)
this.$i18n.locale = ZH
this.locale = zhCN
}
}
}
}
</script>
vue-i18n在頁面中的使用
<a-pagination showSizeChanger :defaultCurrent="3" :total="500" />
<!-- i18n使用$t(key的名稱)-->
<span>{{$t('title.home')}}</span>
效果展示
默認(rèn)顯示中文兵扬，按鈕為英文
點擊English按鈕麻裳，切換成中文。組件和對應(yīng)的文字都進(jìn)行了改變器钟。
