前端VUE双语实现方案详细教程
作者：马优晨
在项目需求中我们会遇到国际化的中英文切换,这篇文章主要给大家介绍了关于前端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!',
}
}
};总结
到此这篇关于前端VUE双语实现方案的文章就介绍到这了,更多相关前端VUE双语实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！