iview VueI18n国际化

需求：国际化

实现：

1 安装依赖 

这里vue -i18n和iview版本兼容性查看iview官网

"view-design": "^4.0.2",
    "vue": "^2.6.10",
    "vue-i18n": "^8.15.4",

2  index.js

（1）文件配置也需要查看iview官网

（2）这里的写法适用iview组件按需引入的写法；

import Vue from 'vue';
import { locale } from 'view-design';
import VueI18n from 'vue-i18n';
import zh from 'view-design/dist/locale/zh-CN';
import en from 'view-design/dist/locale/en-US';
/**
 * 导入iview自带语言包
 */
Vue.use(VueI18n);
const messages = {
  en: Object.assign(require('./en')), // 英文语言包
  zh: Object.assign(require('./zh')), // 中文语言包
};

export const i18n = new VueI18n({
  // locale: localStorage.getItem('locale') || 'zh',
  locale: (() => {
    let lang = "";
    if (window.sessionStorage.getItem('language')) {
      lang = window.sessionStorage.getItem("language");
    } else {
      //获取浏览器语言
      lang = navigator.language || navigator.userLanguage;
      lang = lang.substr(0, 2);
      if (!["zh", "en"].includes(lang)) {
        lang = "zh"
      }
    }
    if (lang==="zh") {
      locale(zh);
    }else {
      locale(en);
    }
    return lang;
  })(),
  messages
});

3 zh.js和en.js文件

// 通话记录
export const record = {
    play:"播放",
    download:"下载",
    opeartor:"接线员",
    callngNumber:"主叫号码",
    calledNumber:"被叫号码",
    callTime:"通话时间",
    callRecord:"通话记录",
    recordStatus:"通话状态",
    recordTime:"通话时长",
    noRecord:"暂无通话记录",
    callType:"呼叫类型",
    numClientOperator:"电话/客户/接线员",
    clientName:"客户",
    opearatorName:"接线员",
};

// 通话记录
export const record = {
    play:"Play",
    download:"Download",
    opeartor:"Operator",
    callngNumber:"Calling Number",
    calledNumber:"Called Number",
    callTime:"Call Time",
    callRecord:"Call Records",
    recordStatus:"Call Status",
    recordTime:"Call Duration",
    noRecord:"No Data",
    callType:"Call Type",
    numClientOperator:"Telephone / Client / Operator",
    clientName:"Client",
    opearatorName:"Operator",
};

4 iview 组件按需引入

import {
    Button,
    Input,
    Form,
    FormItem
} from "view-design"

Vue.component("Button", Button);
Vue.component("Input", Input);
Vue.component("Form", Form);
Vue.component("FormItem", FormItem);

5 main.js文件中引入

// 导入语言
import {
    i18n
  } from './lang/index';

6  文件中引用

模板中

{{$t("login.login")}}

                        
                    

js中

this.$Notice.warning(this.$t("login.passwordsNotMatch"));

code.js(跟main.js平层的）

import Vue from "vue";
// 导入语言
import { i18n } from "../lang/index";

window.vm = new Vue({
  i18n
});
export const orderDetailValue = {
  [orderDetailKey.wordKey]: "iconfont iconText", //文本
  [orderDetailKey.voiceKey]: "iconfont iconvoice1", //语音
  [orderDetailKey.questKey]: "iconfont iconForm" //问题表单
};

后台返回字段

export function getRightBtn(key) {
  let nav = {
    EDIT: window.vm.$t("nav.EDIT"),
    READ: window.vm.$t("nav.READ"),
    CREATE: window.vm.$t("nav.CREATE"),
    AUDIT: window.vm.$t("nav.AUDIT")
  };
  return nav[key] ? nav[key] : " ";
}