Vue+ElementUI的国际化处理

前言：

一个月前项目应客户需求需要英文版，就此提出了国际化的需求。在以搭建的项目上开始国际化的处理。

---

准备：

1.安装与引用

npm install vue-i18n

在main.js中引入

import i18n from './i18n/i18n';
Vue.use(i18n);

window.app = new Vue({
    el: '#app',
    router,
    store,
    i18n,
    template: '<App/>',
    components: {
        App
    }
})

2.目录结构

图片1 -- 目录结构图

3.主要文件：

i18n.js:获取本地localStorage中存储的语言，用此存储主要是为了能记住用户选择的语言状态。

import Vue from 'vue';
import locale from 'element-ui/lib/locale';  //elementUI的国际化
import VueI18n from 'vue-i18n';
import languagePack from './langs';
import {
    getLocalStore
} from "@/utils/webstore-utils.js";
import {
    LAGU
} from "../config/webstore";

Vue.use(VueI18n)

const i18n = new VueI18n({    //从localStorage中取，没有就默认的中文
    locale: getLocalStore(LAGU) || 'zh',
    languagePack,
})
locale.i18n((key, value) => i18n.t(key, value)) //elementui多语言切换

export default i18n

index.js

import en from './en';
import zh from './zh';
export default {
    en: en,
    zh: zh
}

en.js 和 zh.js 即自定义的语言包,一下为部分示例。中英对照

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const zh = {
    login: {
        'username': '用户名',
        'password': '密码',
        'signin': '登录',
    },
    ...zhLocale
}
export default zh;

import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
login: {
        'username': 'username',
        'password': 'password',
        'signin': 'signin',
    },

    ...enLocale
}
export default en;

4.原项目中语言进行替换，并进行监听用户选择的语言

重点：$t(' ')

<el-input :placeholder="$t('login.username')" ></el-input>
<el-checkbox v-model="language">{{$t('login.selectLanguage')}}</el-checkbox>

//js中 要加上this
export default {
  ...
   message: this.$t("a.b"),
  ...
}

 watch: {
        language: function() {   //此处language对应上方的checkbox进行绑定的数据
            this.$i18n.locale === "zh"     
                ? (this.$i18n.locale = "en")
                : (this.$i18n.locale = "zh");
            getLocalStore(LAGU) === "zh"   //本地存储的进行变化
                ? setLocalStore(LAGU, "en")
                : setLocalStore(LAGU, "zh");
        }
    }

5.遇到切换后data数据没变化

解决：放到computed中