解决vue国际化问题——i18n的使用(iview)

问题：对于需要支持国际化的项目，可以通过引入vue-i18n包的方式配置解决

1、npm安装

npm install vue-i18n --save

成功后可以在package.json文件中看到已添加了vue-i18n：

"vue-i18n": "^8.11.2"

下面为兼容vue-i18n@6.x+及更高版本的配置介绍。

2、在src资源文件下创建文件夹i18n，i18n下创建index.js文件，引入VueI18N,配置i18n，并导入语言包(根据开发需求添加语言)

import Vue from "vue";
import { getBrowserLang, getCookieLang } from "@utils/storage";
//引入vue-i18n
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
//引入iview自带的组件语言js包
import en from 'iview/dist/locale/en-US'
import zh from 'iview/dist/locale/zh-CN'
//引入本地自己创建的中英文js语言包(注意路径改为自己的本地js路径)
import cnLocale from "../../public/custom/js/zh";
import enLocale from "../../public/custom/js/en";
//配置i18n
Vue.locale = () => {}

// 获取当前语言（初始化,首先从cookie里获取,localStorage里没有存语言，默认为浏览器当前的语言）
let cookieLang = getCookieLang();
cookieLang = cookieLang === "en" || cookieLang === "us" ? "en_US" : cookieLang;
const lang = cookieLang || getBrowserLang();

//配置i8n
Vue.locale = () => {};
//注册vue-i18n实例i18n，并引入语言文件
const i18n = new VueI18n({
  locale: lang,		//这里的locale对应的是当前的语言标识。
  messages: {
    zh_CN: Object.assign(cnLocale, zh),
    en_US: Object.assign(enLocale, en),
    //如果不需要引入iview的语言组件包，也可写成
    //zh_CN:cnLocale,
    //en_US:enLocale,
  }
});

export default i18n;

3、在main.js文件中：

把 i18n 挂载到 vue 根实例上

import i18n from "./i18n";

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

4、根据2中语言包引入的路径，在相对应的文件下(此处为public/custom/js/zh.js和en.js)新建语言文件包：en.js和zh.js，并在文件里根据需求编写语言提示语并抛出。（注：两者字段命名需相同）

//zh.js中：
const zh = {
  asec: {
    title: "标题",
    personalinfo: "个人资料",
    logout: "退出登录",
    goback: "返回",
    loginpwd: "登录密码",
    emailbind: "邮箱绑定",
    phonebind: "手机号绑定",
  },
  baseModal: {
    okBtnText: "确定",
    cancelBtnText: "取消",
  }
}

export default zh;

//en.js中：
const en = {
  asec: {
    title: "title",
    personalinfo: "PersonInfo",
    logout: "sign out",
    goback: "go Back",
    loginpwd: "Login Password",
    emailbind: "Mailbox binding",
    phonebind: "Phone binding"
  },
  baseModal: {
    okBtnText: "Confirm",
    cancelBtnText: "Cancel",
  }
}

export default en;

5、中英文切换处理。

vue-i18n 提供了一个全局配置参数叫 “locale”，通过改变 locale 的值可以实现不同语种的切换

可通过以下代码切换语言。lang代表语言标识。（可自己任意命名，eg：“en”，“zh”，“en_US”，“zh_CN”）

//可通过this.$i18n.locale = lang 设置当前语言

// 语言切换事件
changeLanguage(lang) {
  lang === "" ? "zh_CN" : lang;
  this.$i18n.locale = lang;
  // 使用 localStorage 存储语言状态
  localStorage.setItem('locale', this.$i18n.locale)
},

6、组件中使用

组件中使用时即可通过 $t() 的方式进行引用。

eg: $t('baseModal.okBtnText')

<span>{{$t("asec.title")}}</span>