本文已参与「新人创作礼」活动，一起开启掘金创作之路。
公司的项目应用了国际化，让项目可以进行语言的切换。研究了一下，实际上是用vue-i18n来实现多语言切换，从而实现国际化的需求。第一次接触国际化，简单记录一下。
1.安装依赖
npm install vue-i18n
也可以通过脚本引入：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
2.配置main.js文件
import Vue from 'vue';
import App from './App.vue';
import VueI18n from 'vue-i18n';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
/*---------挂载全局使用-----------*/
Vue.use(VueI18n);
Vue.use(ElementUI);
/*---------基本使用-----------*/
// /*---------使用语言包-----------*/
const i18n = new VueI18n({
locale: 'zh-CN', // 语言标识
messages: {
'zh-CN': require('./assets/common/cn'), // 中文语言包
'zh-EN': require('./assets/common/en'), // 英文语言包
'zh-FA': require('./assets/common/fa'), // 法语语言包
'zh-FT': require('./assets/common/ft') // 繁体字语言包
}
});
new Vue({
i18n, // 注意这里
render: h => h(App)
}).$mount('#app');
3.对应的语言包进行配置：
src/assets/common下面的文件：
// cn.js
export const message = {
music: '网易云音乐',
findMusic: '发现音乐',
myMusic: '我的音乐',
friend: '朋友',
musician: '音乐人',
download: '下载客户端'
}
// en.js
export const message = {
music: 'Music',
findMusic: 'FIND MUSIC',
myMusic: 'MY MUSIC',
friend: 'FRIEND',
musician: 'MUSICIAN',
download: 'DOWNLOAD'
}
// fa.js
export const message = {
music: 'Musique pour netease cloud',
findMusic: 'Découvrir la musique',
myMusic: 'De ma musique',
friend: 'Des amis',
musician: 'Le musicien',
download: 'Télécharger le client'
}
// ft.js
export const message = {
music: '網易雲音樂',
findMusic: '發現音樂',
myMusic: '我的音樂',
friend: '朋友',
musician: '音樂人',
download: '下載客戶端'
}
4.测试demo文件，进行语言包实践
<template>
<div class="international">
<!-- 切换语言 -->
<div class="language">
<el-select
v-model="value"
placeholder="请选择"
@change="changeLangEvent(value)"
>
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<!-- tabs标签页 -->
<div class="tabs">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane :label="$t('message.music')" name="first">
{{$t('message.music')}}
</el-tab-pane>
<el-tab-pane :label="$t('message.findMusic')" name="second">
{{$t('message.findMusic')}}
</el-tab-pane>
<el-tab-pane :label="$t('message.myMusic')" name="third">
{{$t('message.myMusic')}}
</el-tab-pane>
<el-tab-pane :label="$t('message.friend')" name="fourth">
{{$t('message.friend')}}
</el-tab-pane>
<el-tab-pane :label="$t('message.musician')" name="fivth">
{{$t('message.musician')}}
</el-tab-pane>
<el-tab-pane :label="$t('message.download')" name="sixth">
{{$t('message.download')}}
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
export default {
name: 'vueInternationalI18n',
data() {
return {
value: 'zh-CN',
lang: 'zh-CN',
activeName: 'first',
options: [
{
value: 'zh-CN',
label: '中文'
},
{
value: 'zh-EN',
label: '英文'
},
{
value: 'zh-FA',
label: '法语'
},
{
value: 'zh-FT',
label: '繁体'
}
]
};
},
methods: {
handleClick() {},
// 切换语言
changeLangEvent(value) {
switch (value) {
case 'zh-CN':
this.lang = value;
this.$i18n.locale = this.lang; //关键语句
break;
case 'zh-EN':
this.lang = value;
this.$i18n.locale = this.lang; //关键语句
break;
case 'zh-FA':
this.lang = value;
this.$i18n.locale = this.lang; //关键语句
break;
case 'zh-FT':
this.lang = value;
this.$i18n.locale = this.lang; //关键语句
break;
default:
break;
}
}
}
};
</script>
<style lang="css">
.international {
width: 75vw;
margin: 0 auto;
}
.language {
position: absolute;
right: 12.5vw;
z-index: 20000000;
}
.tabs {
margin-top: 15px;
}
</style>
几个要点：
changeLangEvent事件实现语言切换；- 重点在于"关键语句"：
this.\$i18n.locale： 当赋值为"zh-CN"时，导航栏就变成中文； 当赋值为 "zh-EN"时，导航栏就变成英文； 当赋值为"zh-FA"时，导航栏就变成法语； 当赋值为"zh-FT"时，导航栏就变成中文繁体。
数据渲染的模板应该是：
<!-- v-text 形式 -->
<div v-text="$t('m.music')"></div>
<!-- {{}} 形式 -->
<div>{{$t('m.music')}}</div>
在实际应用中，每个文件都需要进行上面的模板渲染。
5.更多
参考官网vue-i18n官网：kazupon.github.io/vue-i18n/zh…
6.疑问
-
如何自动获取本地语言，然后加载不同的语言包？
一般实践中，可以将用户习惯的语言类型作为一个字段存储在localStorage上面，前端加载项目的时候，将localStorage中的字段读取出来，然后加载语言包。实际上，也可以将这个字段作为用户名下的一个属性，绑定在一起，当用户登录进去时，读取这个字段，然后加载对应的语言包。
-
一个小优化的地方
查看了项目代码，项目中用了懒加载的方式进行语言包的加载，这是一个小小的优化点。
定义一个
$loadLanguage方法来实现：
// @/i18n/lang/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
local: 'zh-CN',
messages: {}
})
// 懒加载语言包
Vue.prototype.$loadLanguage = lang => {
import(`@/i18n/lang/${lang}`).then(messages => {
i18n.setLocaleMessage(lang, messages.default)
i18n.locale = lang
return lang
})
}
export default i18n
- 如果是在js文件中引用i18n的字段，应该怎么写？
import i18n from '@/i18n'
export default {
refundRulesMap: {
// 退费规则对照表
absence: i18n.t('1351.absence_day'),
casualLeave: i18n.t('1351.personal_leave_single_day'),
sickLeave: i18n.t('1351.sick_leave_single_day'),
absenceMore: i18n.t('1351.daily_absence_of_more_than_5_d'),
casualLeaveMore: i18n.t('1351.personal_leave_of_more_than_5'),
sickLeaveMore: i18n.t('1351.sick_leave_more_than_5_days_pe')
},
}
或者：
this.$t('1351.absence_day')
7.代码地址
https://gitee.com/yanwuhc/i18n-demo.git
