一、使用背景
项目中,需要进行多语言切换时使用vue-i18n。此处演示进行中文,英文,俄文切换。
二、使用步骤
1.安装vue-i18n
(网上有的说最近版本会有问题,推荐安装8.27.1,我直接安装的8.27.1)
npm install --save vue-i18n
npm install --save vue-i18n@8.27.1
2. 创建语言包文件
2.1 在src目录下创建i18n文件夹
2.2 在i18n文件夹下创建locale文件夹
2.3 在local文件夹下创建en.json、zh-CN.json、ru.json,分别存放英文,中文和俄文的json,对应的内容如下
(可根据实际情况增加自己项目的翻译内容,此处仅用作演示)
// en.json,对应英语翻译
{
"index":{
"title":"title"
}
}
// zh-CN.json,对应汉语翻译
{
"index":{
"title":"标题"
}
}
// ru.json,对应俄语翻译
{
"index":{
"title":"Заголовок"
}
}
2.4 在i18n文件夹下创建i18n.js,内容如下
import Vue from 'vue';
import Element from 'element-ui';
import VueI18n from 'vue-i18n';
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
import ruLocale from 'element-ui/lib/locale/lang/ru-RU';
import en from './locale/en';
import zh from './locale/zh-CN';
import ru from './locale/ru';
const messages = {
en: {
...en,
...enLocale
},
zh: {
...zh,
...zhLocale
},
ru: {
...ru,
...ruLocale
}
};
let lang = localStorage.getItem('lang');
let locale = lang == 'en_US' ? 'en' : lang == 'ru-RU' ? 'ru' : 'zh';
window.sessionStorage.setItem('lang', locale);// 设置缓存为默认语言
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: locale, // 设置默认语言
messages,
silentTranslationWarn: true
});
Vue.use(Element,{
i18n: (key,value) => i18n.t(key,value)
});
export default i18n;
3. 引入i18n使用
3.1 在main.js中增加如下两行代码
3.2 在App.vue文件中增加如下代码
<script>
export default {
name: 'App',
mounted() {
let lang = localStorage.getItem('lang');
if (lang == 'en_US') {
this.$i18n.locale = 'en';
} else if (lang == 'ru-RU') {
this.$i18n.locale = 'ru';
} else{
this.$i18n.locale = 'zh';
this.locale = null;
}
}
};
</script>
4. 页面使用
4.1 把页面中需要翻译的字段换成如下格式
4.2 增加按钮进行语言切换选择
<!-- 多语言切换 -->
<div>
<el-dropdown trigger="click" @command="handleCommand">
<div>
<span class="header-icon" style="color:#ffffff">
<!-- 图片 -->
<img :src="enhlishToChina" width="40px" height="40px" />
</span>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh" :disabled="'zh' === $i18n.locale">简体中文</el-dropdown-item>
<el-dropdown-item command="en" :disabled="'en' === $i18n.locale">English</el-dropdown-item>
<el-dropdown-item command="ru" :disabled="'ru' === $i18n.locale">Русский язык</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
// 生命周期 dom 渲染完成后
mounted () {
this.$i18n.locale = window.sessionStorage.getItem('lang');// 获取缓存中的语言类型默认显示
},
// 点击切换时,默认为当前选择的语言
handleCommand(lang) {
this.$i18n.locale = lang; // 设置给本地的i18n插件
window.sessionStorage.setItem('lang', lang);// change国际化
},
三、注
1. 该方法是通过语言包中json文件中对应的翻译内容进行替换翻译的,只有内容在文件中进行提前翻译了的,才会在运行中进行翻译,并不是动态翻译
2. 当项目需要翻译的内容很多的时候,可以借助第三方翻译工具进行翻译自动生成json文件
3. 引入语言包时,语言代码需要正确对应,常见的地区对照码详见链接地址
4. 以上的例子是将选择的语言类型放在sessionStorage中,内容会随着浏览器刷新等操作清除;可根据实际情况放到localStorage中长久缓存,不会随浏览器刷新而丢失内容
5. 进行页面翻译时,常伴随后台返回数据的翻译,可以将选择的语言类型放在请求头中返给后台,由后台获取处理
import axios from 'axios';
axios.defaults.headers.post['locale'] = lang;// 请求头修改,用于后台选择语言