i18n vue+element ui 国际化
项目结构：
前端vue+element ui
后端java springboot
国际化方案：
前端项目都安装i18n：
npm i vue-i18n –save
都做前端国际化，后端不做国际化，只对异常定义好返回码
前端项目：
定义i18n文件夹
定义：i18n/langs文件夹
定义如下目录结构
示例：en.js,其他文件类似
const en = {
index: 'index',
language: {
zh: 'Chines',
en: 'English',
zw: 'Traditional Chinese'
},
login: {
username: 'username',
password: 'password',
captcha: 'captcha',
login: 'login',
selectLanguage: 'Select language',
moreAbout: 'Learn more about services',
forgetPassword: 'Forget password',
message: {
username: 'User name cannot be empty',
password: 'Password cannot be empty',
captcha: 'Verification code cannot be empty'
}
},
sys: {
menu: {
esg_index_HongKong: 'Hong Kong Stock Exchange',
analysis: 'Kpi Analysis',
cal_manager: 'KPI计算管理-en',
analysis_export_kpi: 'KPI导出-en',
analysis_export_report: '报告导出-en',
cal_schedule: '计算任务管理-en',
communicate_importantrecog: '重要性识别-en',
dashboard_Old: 'Dashboard-Old-en',
esg_index: 'esg index',
fillProgress: '填报进度-en',
job_email_schedule: '邮件任务管理-en',
job_schedule: '填报任务管理-en',
kpi_apporove: 'kpi approval',
kpi_fill: 'kpi reporting',
progress: 'Progress display',
quanyiren: 'Stakeholder communication',
showDashboard: 'Dashboard-en',
sys_approve_manager: '审批管理-en',
sys_dashboard_manager: 'Dashboard管理-en',
sys_dept: '部门管理-en',
sys_dict: '字典管理-en',
sys_kpi_analysis_manage: 'KPI分析管理-Old',
sys_email_account: '发件人管理-en',
email_management: '邮件管理-en',
sys_file_export_manage: '附件导出-en',
sys_fill_kpi_manager: '填报管理-en',
sys_fiscal: '财年管理-en',
sys_information_manager: '通知管理-en',
sys_kpi_manager: 'KPI管理-en',
sys_log: '系统日志-en',
sys_manager: 'system management',
sys_menu: '菜单管理-en',
sys_role: '角色管理-en',
sys_unit_conversion: '单位换算管理-en',
sys_unit_type_manager: '单位管理-en',
sys_user: '用户管理-en',
send_email: '发件管理-en'
}
},
role: {
inputPh: 'role name',
bt: {
query: 'query',
add: 'add',
batchDelete: 'batch delete',
delete: 'delete',
update: 'update'
},
th: {
roleName: 'role name',
remark: 'remark',
createTime: 'create time',
handler: 'handler'
},
sysAdmin: {
roleName: 'administrator',
remark: 'administrator'
},
settingUser: {
roleName: 'Staffing',
remark: 'Staffing'
},
adminUser: {
roleName: 'admin',
remark: 'Group head'
},
approverUser: {
roleName: 'Approver',
remark: 'Approver'
},
fillUser: {
roleName: 'Filled by',
remark: 'Filled by'
}
},
prop: {
inputPh: 'Please enter the information to query',
bt: {
query: 'query',
add: 'add',
batchDelete: 'batch delete',
delete: 'delete',
update: 'update',
setting: 'setting'
},
th: {
number: 'number',
propId: 'Dictionary coding',
propName: 'Dictionary type',
memo: 'Explain',
handler: 'Handler'
}
},
dept: {
inputPh: 'Please enter the dept',
bt: {
directSub: 'Show only immediate sub dept',
query: 'query',
expandAll: 'expand all',
closeAll: 'close all',
add: 'add',
batchDelete: 'batch delete',
importTemplate: 'Import template',
batchImport: 'Batch import',
delete: 'delete',
update: 'update',
},
th: {
number: 'number',
name: 'dept name',
parentName: 'parent name',
handler: 'Handler'
}
}
}
export default en
和main.js平级目录新建 i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 引入各个语言配置文件
import localeZh from '../i18n/langs/zh'
import elementZh from 'element-ui/lib/locale/lang/zh-CN'
import zh_levelsubject from "../i18n/langs/zh_LevelSubject"
import localeEn from '../i18n/langs/en'
import elementEn from 'element-ui/lib/locale/lang/en'
import en_levelsubject from "../i18n/langs/en_LevelSubject"
import localeZw from '../i18n/langs/zw'
import elementZw from 'element-ui/lib/locale/lang/zh-TW'
import zw_levelsubject from "../i18n/langs/zw_LevelSubject"
Vue.use(VueI18n)
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
// 设置默认语言
locale: 'zh', // 语言标识
// 添加多语言（每一个语言标示对应一个语言文件）
messages: {
zh: {
...localeZh,
...elementZh,
...zh_levelsubject
},
en: {
...localeEn,
...elementEn,
...en_levelsubject
},
zw: {
...localeZw,
...elementZw,
...zw_levelsubject
}
}
})
// 暴露i18n
export default i18n
修改main.js
// 新增
import i18n from './i18n'
Vue.use(Element, {
//....
// 新增
i18n: (key, value) => i18n.t(key, value)
})
new Vue({
// 新增
i18n
})
修改login.vue
$t开头的占位服务与en.js等定义的key对应 |
|
表头需要自定国际化，参考en.js定义的key
Element默认提示信息映入element ui国际化js
详见： i18n.js
切换语言代码：
<el-form-item>
<el-select v-model="dataForm.language" style="width: 180px" :placeholder="$t('login.selectLanguage')"
@change="handleSetLanguage">
<el-option
v-for="item in options"
:key="item.code"
:label=$t(item.name)
:value="item.code">
</el-option>
</el-select>
</el-form-item>
data() {
return {
options: [{
code: 'zh',
name: 'language.zh'
}, {
code: 'en',
name: 'language.en'
}, {
code: 'zw',
name: 'language.zw'
}],
dataForm: {
userName: '',
password: '',
uuid: '',
language: this.$cookie.get('language') === 'undefine' ? 'zh' : this.$cookie.get('language'),
captcha: ''
},
methods: {
handleSetLanguage() {
this.$cookie.set('language', this.dataForm.language)
this.$i18n.locale = this.dataForm.language
},
后端表里的只如果想要用前端国际化，就需要再后端数据表上新增一列key
返回response中包含此key
前端遍历数据处理如下：
如果只需对标里的某一个字段国际化，只需$t('langKey')
2. 前端只做web元素国际化，后端给冬天数据国际化后端可以引入i18n，配置对应语言的翻译文件key，返回前天时遍历取值
3. 前端只做web元素国际化，后台不同语言的值放在不同的表中，表名区分，里面字段一模一样，但是字段的值不一样，存储的是对应语言的值
npm i vue-i18n –save
