前端VUE双语实现方案详细教程

 更新时间:2024年08月20日 10:35:53   作者:马优晨  
在项目需求中我们会遇到国际化的中英文切换,这篇文章主要给大家介绍了关于前端VUE双语实现方案的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

一、封装一个lib包

结构如下

en.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
'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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
'use strict';
 
exports.__esModule = true;
exports.default = {
    sp: {
        input: {
            amountError: '金额格式不正确'
        },
        table: {
            total: '共计:',
            selected: '已选择:',
            tableNoData: '暂无数据',
            tableNoDataSubtext: '提示:建议核实筛选条件',
            tableLoadingData: '搜索中...'
        },
        select: {
            placeholder: '请选择'
        },
        preview: {
            button: '查看'
        }
    }
};

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
'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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import i18n from './i18n';
 
const vue = new Vue({
  router,
  store,
  i18n,
  created() {
    injectBeyla();
  },
  mounted() {
    util.init();
  },
  render: h => h(App),
}).$mount('#app');

四、在页面中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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双语实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/qq_24147051/article/details/138564845

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 解决vue+webpack项目接口跨域出现的问题

    解决vue+webpack项目接口跨域出现的问题

    这篇文章主要介绍了解决vue+webpack项目接口跨域出现的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 浅谈Vue SPA 首屏加载优化实践

    浅谈Vue SPA 首屏加载优化实践

    本篇文章主要介绍了浅谈Vue SPA 首屏加载优化实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue antd Form表单的使用及说明

    vue antd Form表单的使用及说明

    这篇文章主要介绍了vue antd Form表单的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue中使用WX-JSSDK的两种方法(推荐)

    vue中使用WX-JSSDK的两种方法(推荐)

    这篇文章主要介绍了vue中使用WX-JSSDK的两种方法,每种方法通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  •  面试问题Vue双向数据绑定原理

     面试问题Vue双向数据绑定原理

    这篇文章主要介绍了 面试问题Vue双向数据绑定原理,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • vue3如何用pinia替代vuex

    vue3如何用pinia替代vuex

    这篇文章主要介绍了vue3如何使用pinia替代vuex问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vuejs+element UI table表格中实现禁用部分复选框的方法

    vuejs+element UI table表格中实现禁用部分复选框的方法

    今天小编就为大家分享一篇vuejs+element UI table表格中实现禁用部分复选框的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Ant design vue中的联动选择取消操作

    Ant design vue中的联动选择取消操作

    这篇文章主要介绍了Ant design vue中的联动选择取消操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue.js编译时给生成的文件增加版本号

    vue.js编译时给生成的文件增加版本号

    这篇文章主要介绍了vue.js编译时给生成的文件增加版本号,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue中的ElementUI的使用详解

    vue中的ElementUI的使用详解

    本文通过实例代码给大家介绍了vue中的ElementUI的使用,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10

最新评论