公司的项目应用了国际化,让项目可以进行语言的切换。研究了一下,实际上是用vue-i18n
来实现多语言切换,从而实现国际化的需求。第一次接触国际化,简单记录一下。
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>
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');
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: '下載客戶端'
}
<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>
<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
"时,导航栏就变成中文繁体。数据渲染的模板应该是:
<div v-text="$t('m.music')">div>
<div>{{$t('m.music')}}div>
在实际应用中,每个文件都需要进行上面的模板渲染。
参考官网vue-i18n官网:https://kazupon.github.io/vue-i18n/zh/introduction.html
如何自动获取本地语言,然后加载不同的语言包?
一般实践中,可以将用户习惯的语言类型作为一个字段存储在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
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')
https://gitee.com/yanwuhc/i18n-demo.git