一、封装一个lib包

结构如下

en.js

<code>'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

<code>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>，请注意查收。'code>

},

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.'code>

},

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