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] : " ";
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！