vue-i18n国际化使用

一、使用背景

项目中，需要进行多语言切换时使用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. 引入语言包时，语言代码需要正确对应，常见的地区对照码详见链接地址

简书：国际化（i18n） 地区对照语言码

4. 以上的例子是将选择的语言类型放在sessionStorage中，内容会随着浏览器刷新等操作清除；可根据实际情况放到localStorage中长久缓存，不会随浏览器刷新而丢失内容

5. 进行页面翻译时，常伴随后台返回数据的翻译，可以将选择的语言类型放在请求头中返给后台，由后台获取处理

import axios from 'axios';
axios.defaults.headers.post['locale'] = lang;// 请求头修改，用于后台选择语言