前端双语实现方案（VUE版）

一、封装一个lib包

结构如下

en.js

'use strict';exports.__esModule = true;
exports.default = {sp: {input: {amountError: 'Incorrect amount format'},table: {total: 'Total:',selected: 'Selected:',tableNoData: 'No data',tableNoDataSubtext: 'Tip: Suggest to recheck your filter.',tableLoadingData: 'Searching...'},select: {placeholder: 'Select'},preview: {button: 'View'}}
};

zh-CN.js

'use strict';exports.__esModule = true;
exports.default = {sp: {input: {amountError: '金额格式不正确'},table: {total: '共计：',selected: '已选择：',tableNoData: '暂无数据',tableNoDataSubtext: '提示：建议核实筛选条件',tableLoadingData: '搜索中...'},select: {placeholder: '请选择'},preview: {button: '查看'}}
};

index.js

'use strict';exports.__esModule = true;
exports.i18n = exports.use = exports.t = undefined;var _zhCN = require('./lang/zh-CN');var _zhCN2 = _interopRequireDefault(_zhCN);var _vue = require('vue');var _vue2 = _interopRequireDefault(_vue);var _deepmerge = require('deepmerge');var _deepmerge2 = _interopRequireDefault(_deepmerge);var _format = require('element-ui/lib/locale/format');var _format2 = _interopRequireDefault(_format);function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var format = (0, _format2.default)(_vue2.default);
var lang = _zhCN2.default;
var merged = false;
var i18nHandler = function i18nHandler() {var vuei18n = Object.getPrototypeOf(this || _vue2.default).$t;if (typeof vuei18n === 'function' && !!_vue2.default.locale) {if (!merged) {merged = true;_vue2.default.locale(_vue2.default.config.lang, (0, _deepmerge2.default)(lang, _vue2.default.locale(_vue2.default.config.lang) || {}, { clone: true }));}return vuei18n.apply(this, arguments);}
};
var t = exports.t = function t(path, options) {var value = i18nHandler.apply(this, arguments);if (value !== null && value !== undefined) return value;var array = path.split('.');var current = lang;for (var i = 0, j = array.length; i < j; i++) {var property = array[i];value = current[property];if (i === j - 1) return format(value, options);if (!value) return '';current = value;}return '';
};var use = exports.use = function use(l) {lang = l || lang;
};var i18n = exports.i18n = function i18n(fn) {i18nHandler = fn || i18nHandler;
};exports.default = { use: use, t: t, i18n: i18n };

二、封装i18n对象

结构如下

index.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import elementLocale from 'element-ui/lib/locale';import elementCnLocale from 'element-ui/lib/locale/lang/zh-CN'; // element-ui lang
import elementEnLocale from 'element-ui/lib/locale/lang/en'; // element-ui lang
import cnLocale from './lang/cn';
import enLocale from './lang/en';
import spuiEnLocale from 'lib/locale/lang/en';
import spuiCnLocale from 'lib/locale/lang/zh-CN';
import spuiLocale from 'lib/locale/index.js';const messages = {en: {...elementEnLocale,...enLocale,...spuiEnLocale},cn: {...elementCnLocale,...cnLocale,...spuiCnLocale}
};Vue.use(VueI18n);const i18n = new VueI18n({locale: 'cn',fallbackLocale: 'cn',messages
});// fix element-ui language switching issue.
elementLocale.i18n((key, value) => i18n.t(key, value));
spuiLocale.i18n(function(key, value) {return i18n.t(key, value);
});export default i18n;

cn/index.js

export default {common: {merchantPlatform: '商户平台',search: '查询',clear: '清除',prev: '上一步',next: '下一步',done: '完成',batchCopy: '一键复制',currency: '币种',back: '返回',submit: '提交',confirm: '确认',add: '添加',delete: '删除',edit: '编辑',notify: '通知',noLoginName: '未登录',logout: '账号登出',changePwd: '修改密码',total: '总计',language: '语言设置',languageList: [{value: 'en',label: 'English'},{value: 'cn',label: '中文'}],gotIt: '知道了',tableNoData: '暂无数据',tableNoDataSubtext: '提示：建议核实筛选条件',talbeLoadingData: '搜索中...',homeLoadingTitle: '正在加载资源',homeLoadingSubTitle: '初次加载资源可能需要较多时间 请耐心等待',action: '操作',save: '保存',cancel: '取消',saveSuccessTip: '保存成功!',deleteSuccessTip: '删除成功',yes: '是',no: '否',nonactivated: '未开通',required: '必填',view: '查看',agree: '同意',disagree: '不同意',notice: '公告通知',workOrderNotice: '工单通知',timeZone: '时区',mailLanguage: '邮件语言: ',mailLanguageTitle: '选择邮件语言',mailLanguageContent: '所有与您绑定的商户，都将以该语言给您发送邮件。',noContractSigned: '当前账户未开通该业务合同，请您联系PayerMax商务负责人获取进一步帮助',copySuccessfully: '复制成功',copyFailed: '复制失败：您可尝试单击右键进行复制',require: '必填',to: '-',today: '今天',yesterday: '昨天',last7Days: '过去7天',last30Days: '过去30天',placeholderStartDate: '开始日期',placeholderEndDate: '结束日期',applyRefundDes_1: '系统正在处理，请稍后查询。受理成功后，款项预计',applyRefundDes_2: '返回至原支付账户中。',approvalArrivalTimeMap: { 0: '将立刻', 1: '将在1天', 2: '将在10天内', 3: '' },reupload: '重新上传',download: '导出',export: '导出',create: '创建',showDetail: '详情',pixiuDetail: '详情',success: '成功',unit: '笔',units: '笔',all: '全部',timeZoneSetting: '时区设置：',timeZoneDefault: '默认',timeZoneSelectHint: '时区筛选',platformTimeZoneList: [{ value: 'UTC', label: 'UTC +0:00', offset: 0, city: '   世界标准时间', countryCode: 'UTC', zoneName: 'UTC' },{ value: 'UTC +4:00  GST', label: 'UTC +4:00', offset: 240, city: '  迪拜（阿联酋）', countryCode: 'AE', zoneName: 'Asia/Dubai' },{ value: 'UTC +3:00  MSK', label: 'UTC +3:00', offset: 180, city: '  莫斯科（俄罗斯）', countryCode: 'RU', zoneName: 'Europe/Moscow' },{ value: 'UTC +2:00  CAT', label: 'UTC +2:00', offset: 120, city: '  开罗（埃及）', countryCode: 'EG', zoneName: 'Africa/Cairo' },{ value: 'UTC +8:00  PHT', label: 'UTC +8:00', offset: 480, city: '  马尼拉（菲律宾）', countryCode: 'PH', zoneName: 'Asia/Manila' },{ value: 'UTC +8:00  MYT', label: 'UTC +8:00', offset: 480, city: '  古晋（马来西亚）', countryCode: 'MY', zoneName: 'Asia/Kuala_Lumpur' },{ value: 'UTC +2:00  SAST', label: 'UTC +2:00', offset: 120, city: '  约翰内斯堡（南非）', countryCode: 'ZA', zoneName: 'Africa/Johannesburg' },{ value: 'UTC +3:00  AST', label: 'UTC +3:00', offset: 180, city: '  利雅得（沙特）', countryCode: 'SA', zoneName: 'Asia/Riyadh' },{ value: 'UTC +8:00  SGT', label: 'UTC +8:00', offset: 480, city: '  新加坡（新加坡）', countryCode: 'SG', zoneName: 'Asia/Singapore' },{ value: 'UTC +5:30  IST', label: 'UTC +5:30', offset: 330, city: '  加尔各答（印度）', countryCode: 'IN', zoneName: 'Asia/Calcutta' },{ value: 'UTC +7:00  WIB', label: 'UTC +7:00', offset: 420, city: '  雅加达（印度尼西亚）', countryCode: 'ID', zoneName: 'Asia/Jakarta' },{ value: 'UTC +8:00  CST', label: 'UTC +8:00', offset: 480, city: '  北京（中国）', countryCode: 'CN', zoneName: 'Asia/Shanghai' },{ value: 'UTC -3:00  BRT', label: 'UTC -3:00', offset: -180, city: '  圣保罗（巴西）', countryCode: 'BR', zoneName: 'America/Sao_Paulo' },{ value: 'UTC +3:00  TRT', label: 'UTC +3:00', offset: 180, city: '  伊斯坦布尔（土耳其）', countryCode: 'TR', zoneName: 'Europe/Istanbul' }],faq: {label: '常见问题',testUrl: 'https://docs-dev.shareitpay.in/#/2?page_id=178&si=1&lang=zh-cn',prodUrl: 'https://docs.payermax.com/#/12?page_id=180&si=1&lang=zh-cn',},helpList: [{label: '文档中心',testUrl: 'https://docs-dev.shareitpay.in/#/2?page_id=4&si=1&lang=zh-cn',prodUrl: 'https://docs.payermax.com/#/30?page_id=580&si=1&lang=zh-cn',},{label: '帮助中心',url: '',}],documentUrlInfo: {testUrl: 'https://docs.payermax.com/#/12?page_id=81&si=1&lang=cn',prodUrl: 'https://docs.payermax.com/#/30?page_id=580&si=1&lang=zh-cn',},datePick: {tip: '时间跨度最大支持31天'},downloadEmail: {title: '数据处理中',submit: '好的',message: '数据处理完成后，我们会将导出文件发送至您的邮箱 <span class="waring">%{email}</span>，请注意查收。'},accountSubject: '账户主体',securityVerification: '用户安全登录验证',securityOpen: '已开启',securityClosed: '已关闭',deleteMerchantDes: '设为默认，账号登录后默认打开此商户号',defaultMerchantGroupsDes: '设为默认，账号登录后默认打开此商户群组',createGroup: '创建商户群组',switchTommc: '切换至商户平台运营',notification: '公告通知',documentCenter: '文档中心',paymentMethodType: '支付方式类型',},route: {unknown: '未命名菜单',dashboard: '仪表盘',overview: '概览',group: '群组管理',banlnce: '账户余额',balanceTotal: '余额汇总',incomeDetail: '收支明细',merchant: 'merchant',report: '报告',disbursement: '出款查询',reportHistory: '导出记录',transaction: '收单管理',orderSearch: '订单查询',orderDetail: '订单详情',},responseError: {error602: {title: '确定登出',content: '您已被登出，请重新登录',okStr: '重新登录',},error603: {title: '提示',okStr: '重新登录',},errorCodeList: [{ value: '600', label: '用户账号不存在' },{ value: '601', label: '账号名或密码错误' },{ value: '603', label: '获取权限异常，建议重新登录' },{ value: '604', label: '验证失败过多，账号已锁定，请重设密码' },],unknownError: '未知错误'}
};

en/index.js

export default {common: {merchantPlatform: 'Merchant Platform',search: 'Search',clear: 'Clear',prev: 'Back',done: 'Done',batchCopy: 'Copy All',currency: 'Currency',next: 'Next',back: 'Back',submit: 'Submit',confirm: 'Confirm',add: 'Add',delete: 'Delete',edit: 'Edit',notify: 'Notify',noLoginName: 'No Login',logout: 'Sign Out',changePwd: 'Change Password',total: 'Total',language: 'Language Settings',languageList: [{value: 'en',label: 'English'},{value: 'cn',label: '中文'}],gotIt: 'Got it',tableNoData: 'No data',tableNoDataSubtext: 'Tip: Suggest to recheck your filter.',talbeLoadingData: 'Searching...',homeLoadingTitle: 'Loading...',homeLoadingSubTitle: 'It may take more time to load the resource for the first time. Please wait patiently.',action: 'Action',save: 'Save',cancel: 'Cancel',saveSuccessTip: 'Save successfully!',deleteSuccessTip: 'Delete successfully!',yes: 'Confirm',no: 'Cancel',nonactivated: 'Nonactivated',required: 'Required',view: 'View',agree: 'Agree',disagree: 'Disagree',notice: 'Notification',timeZone: 'Time Zone',mailLanguage: 'Email Language: ',mailLanguageTitle: 'Select Email Language',mailLanguageContent: 'All merchants that are bound to you will send you an email in this language.',noContractSigned: 'There is no contract under the current account, please contact the PayerMax business development for further assistance.',copySuccessfully: 'Copy successfully',copyFailed: 'Copy failed: Please try right-click and select Copy',require: 'Required',to: '-',today: 'Today',yesterday: 'Yesterday',last7Days: 'Last 7 days',last30Days: 'Last 30 days',placeholderStartDate: 'Start Date',placeholderEndDate: 'End Date',applyRefundDes_1: 'Wait for some time, system is processing. Once the refund is processed, the money will be sent to the original payment source',applyRefundDes_2: '.',approvalArrivalTimeMap: { 0: ' immediately', 1: ' within 1 working day', 2: ' within 10 working days', 3: '' },reupload: 'Re-upload',download: 'Download',export: 'Export',create: 'Create',showDetail: 'Detail',pixiuDetail: 'Details',success: 'Success',unit: 'order',units: 'orders',all: 'All',timeZoneSetting: 'Timezone Setting: ',timeZoneDefault: 'Default',timeZoneSelectHint: 'Time Zone Filter',platformTimeZoneList: [{ value: 'UTC', label: 'UTC +0:00', offset: 0, city: '   Universal Time Coordinated', countryCode: 'UTC', zoneName: 'UTC' },{ value: 'UTC +4:00  GST', label: 'UTC +4:00', offset: 240, city: '  Dubai(United Arab Emirates)', countryCode: 'AE', zoneName: 'Asia/Dubai' },{ value: 'UTC +3:00  MSK', label: 'UTC +3:00', offset: 180, city: '  Moscow(Russia)', countryCode: 'RU', zoneName: 'Europe/Moscow' },{ value: 'UTC +2:00  CAT', label: 'UTC +2:00', offset: 120, city: '  Cairo(Egypt)', countryCode: 'EG', zoneName: 'Africa/Cairo' },{ value: 'UTC +8:00  PHT', label: 'UTC +8:00', offset: 480, city: '  Manila(Philippines)', countryCode: 'PH', zoneName: 'Asia/Manila' },{ value: 'UTC +8:00  MYT', label: 'UTC +8:00', offset: 480, city: '  Kuching(Malaysia)', countryCode: 'MY', zoneName: 'Asia/Kuala_Lumpur' },{ value: 'UTC +2:00  SAST', label: 'UTC +2:00', offset: 120, city: '  Johannesburg(South Africa)', countryCode: 'ZA', zoneName: 'Africa/Johannesburg' },{ value: 'UTC +3:00  AST', label: 'UTC +3:00', offset: 180, city: '  Riyadh(Saudi Arabia)', countryCode: 'SA', zoneName: 'Asia/Riyadh' },{ value: 'UTC +8:00  SGT', label: 'UTC +8:00', offset: 480, city: '  Singapore(Singapore)', countryCode: 'SG', zoneName: 'Asia/Singapore' },{ value: 'UTC +5:30  IST', label: 'UTC +5:30', offset: 330, city: '  Kolkata(India)', countryCode: 'IN', zoneName: 'Asia/Calcutta' },{ value: 'UTC +7:00  WIB', label: 'UTC +7:00', offset: 420, city: '  Jakarta(Indonesia)', countryCode: 'ID', zoneName: 'Asia/Jakarta' },{ value: 'UTC +8:00  CST', label: 'UTC +8:00', offset: 480, city: '  Beijing(China)', countryCode: 'CN', zoneName: 'Asia/Shanghai' },{ value: 'UTC -3:00  BRT', label: 'UTC -3:00', offset: -180, city: '  Sao Paulo(Brazil)', countryCode: 'BR', zoneName: 'America/Sao_Paulo' },{ value: 'UTC +3:00  TRT', label: 'UTC +3:00', offset: 180, city: '  Istanbul(Turkey)', countryCode: 'TR', zoneName: 'Europe/Istanbul' }],faq: {label: 'FAQ',testUrl: 'https://docs-dev.payermax.com/#/2?page_id=178&si=1&lang=en',prodUrl: 'https://docs.payermax.com/#/12?page_id=180&si=1&lang=en',},helpList: [{label: 'Documents',testUrl: 'https://docs-dev.payermax.com/#/2?page_id=4&si=1&lang=en',prodUrl: 'https://docs.payermax.com/#/30?page_id=580&si=1&lang=zh-en',},{label: 'Support',url: '',hidden: true}],documentUrlInfo: {testUrl: 'https://docs.payermax.com/#/30?page_id=580&si=1&lang=zh-en',prodUrl: 'https://docs.payermax.com/#/30?page_id=580&si=1&lang=zh-en',},datePick: {tip: 'Date range up to 31 days'},downloadEmail: {title: 'Data processing',submit: 'OK',message: 'We will send the export to <span class="waring">%{email}</span> when it\'s completed, please check it later.'},accountSubject: 'Account Subject',securityVerification: 'User security login verification',securityOpen: 'Enabled',securityClosed: 'Closed',deleteMerchantDes: 'Set as default, this merchant account will be displayed after account login',defaultMerchantGroupsDes: 'Set as default, this merchant group account will be displayed after account login',createGroup: 'Create Group',switchTommc: 'Switch to Merchant Platform',notification: 'Notification',documentCenter: 'Document Center',paymentMethodType: 'Payment Method Type',},route: {unknown: 'unknown menu',dashboard: 'Dashboard',overview: 'Dashboard',banlnce: 'Banlnce',balanceTotal: 'Balance Summary',incomeDetail: 'Account Turnover',group: 'Group',report: 'Report',disbursement: 'Disbursement',reportHistory: 'Export Records',merchant: 'merchant',transaction: 'Payment',orderSearch: 'Order Search',orderDetail: 'Order Detail',},responseError: {error602: {title: 'Logout',content: 'Your session has expired, please login again.',okStr: 'Click to Sign in',},error603: {title: 'Hint',okStr: 'Click to Sign in',},errorCodeList: [{ value: '600', label: 'The user account is not exits.' },{ value: '601', label: 'User ID or Password is incorrect.' },{ value: '603', label: 'Something wrong with accessing permission. Suggest to sign in again.' },],unknownError: 'Unknown error.'}
};

三、在VUE中引入 main.js

import i18n from './i18n';const vue = new Vue({router,store,i18n,created() {injectBeyla();},mounted() {util.init();},render: h => h(App),
}).$mount('#app');

四、在页面中使用

  <ProblemDescription :title="$t(`workOrderInfo.yourLocalReceivingAccountNumber`)" /><el-button @click="goBack">{{ $t('workOrderInfo.return') }}</el-button>{prop: 'status',labelKey: 'workOrderInfo.workOrderStatus',minWidth: 130,render(h, row) {const type = setStatus(row.status, this.language) || '';return <div>{row.status == 'PROCESS' && <div style='color: rgba(251, 151, 1, 1);padding: 4px 12px;border-radius: 14px;background: rgba(255, 241, 215, 1);'>{type || '-'}</div>}{row.status == 'FINISHED' && <div style='color: rgba(0, 195, 82, 1);padding: 4px 12px;border-radius: 14px;background: rgba(230, 249, 239, 1);'>{type || '-'}</div>}</div>;}},import local from './local';const SCOPE_NAME = 'workOrderInfo';created() {if (!this.$i18n.getLocaleMessage('en')[SCOPE_NAME]) {this.$i18n.mergeLocaleMessage('en', local.en);this.$i18n.mergeLocaleMessage('cn', local.cn);}},this.tipMessage(this.$t('workOrderInfo.orderExisting'));

local.js

export default {cn: {workOrderInfo: {orderExisting: '该订单已经创建咨询，请刷新页面',mustSelectAContent: '必须选择一项内容',fileCount: '当前限制最多上传 5 个文件!',}},en: {workOrderInfo: {orderExisting: 'The order has been created, please refresh the page',mustSelectAContent: 'One item must be selected',fileCount: 'The current limit allows for a maximum of 5 files to be uploaded!',}}
};