element ui
- 写在前面
- 1. 原有的vue的国际化处理
- 1.1 语言文件
- 1.2 lang的index.js
- 1.3 入口文件导入
- 1.3 应用
- 2. 通过页面添加国际化数据
- 2.1 做法
- 2.2 lang的index.js文件修改
- 2.3 需要注意的点
- 总结
- 写在最后
写在前面
需求：在系统的国际化管理页面添加国际化数据，实现系统的国际化
1. 原有的vue的国际化处理
1.1 语言文件
lang目录下的en文件（相对应的英文）
import user from "./user";
import log from "./log";
import role from "./role";
export default {// 操作按钮button: {search: 'Search',reset: 'Reset',remove: 'Remove',batchRemove: 'Remove',detail: 'Detail',edit: 'Edit',close: 'Close',cancel: 'Cancel',submit: 'Submit',save: 'Save',confirm: 'Confirm',management: 'Management',create: 'Create',modify: 'Modify',open: 'Open',packUp: 'PackUp',check: 'Check',back: 'Back',import: 'Import',export: 'Export',send: "Send Eph",sendMacro: 'Send Macro',ok:'OK',erase:'Erase',calc: 'Calc',resend: 'Resend File',copy:'Copy',paste:'Paste',visible: 'Visible Columns',delete:'Delete All',},// 常用commonColumn: {startTime: 'Start Time',endTime: 'End Time',yes: 'Yes',no: 'No',selectPlaceholder: 'Please select',inputPlaceholder: 'Please enter',operation: 'Operation',status: 'Status',type: 'Type',name: 'Name',englishName: 'English Name',value: 'Value',code: 'Code',sort: 'Sort',selectDelete: 'Please select Delete',createdDate: 'Created Date',all: 'All',setDefault: 'Set Default',noData: 'None',colon: ':',logDetail: 'Log Detail',language: 'Language',systemParameterConfig:'System Parameter Config',},// 平台管理主页home: {deviceMonitor:'Device Monitoring',centralMonitor:'Central Monitoring',macro: 'Macro Configuration',planList:'Plan List',createPlan:'Create Plan',comeBackHome: 'Back To Home',personalCenter: 'Personal Center',clearCache: 'Clear Cache',changePassword: 'Change Password',taskManage: 'Manage Task',fullscreen: 'Fullscreen',exitFullscreen: 'Exit Fullscreen',deviceManage:'Equipment Resource',systemParameterConfig:'System Parameter Config',},// 用户管理user,// 日志管理log,// 角色管理role,
}
zh文件（相对应的中文）
import user from "./user";
import log from "./log";
import role from "./role";
export default {// 操作按钮button: {search: '查 询',reset: '重 置',remove: '删 除',batchRemove: '删 除',detail: '详 情',edit: '编 辑',close: '关 闭',cancel: '取 消',submit: '提 交',save: '保 存',confirm: '确 定',management: '管理',create: '新 建',modify: '修 改',open: '展开',packUp: '收起',check: '查看',back: '返 回',import: '导 入',export: '导 出',send: "发送EPH",sendMacro: '下发宏',ok:'确认',erase:'清除',calc: '计算',resend: '重新下发文件',copy:'复制',paste:'粘贴',visible: '显隐列',delete:'删除所有'},// 常用commonColumn: {startTime: '开始时间',endTime: '结束时间',yes: '是',no: '否',selectPlaceholder: '请选择',inputPlaceholder: '请输入',operation: '操作',status: '状态',type: '类型',name: '名称',englishName: '英文名',value: '值',code: '编码',sort: '序号',selectDelete: '请选择删除项',createdDate: '创建时间',all: '全部',setDefault: '设为默认',noData: '无',colon: '：',logDetail: '日志详情',language: '系统语言',systemParameterConfig:'系统参数配置',},// 平台管理主页home: {deviceMonitor:'设备监控框图',centralMonitor:'集中监控界面',macro: '设置宏配置',planList:'计划列表界面',createPlan:'新建计划界面',comeBackHome: '回到主页',personalCenter: '个人中心',clearCache: '清除缓存',changePassword: '修改密码',taskManage: '任务管理',fullscreen: '全屏',exitFullscreen: '退出全屏',deviceManage:'设备资源管理',systemParameterConfig:'系统参数配置',},// 用户管理user,// 日志管理log,// 角色管理role,}
1.2 lang的index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui 英文包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui 中文包
import enLocale from './en/index'
import zhLocale from './zh/index'
import Cookies from 'js-cookie'Vue.use(VueI18n)const messages = {en: {...enLocale,...elementEnLocale},zh: {...zhLocale,...elementZhLocale}
}const i18n = new VueI18n({// 设置语言 en || zhlocale: Cookies.get('language') || 'en',// 设置文本内容messages
})export default i18n
1.3 入口文件导入
import Vue from 'vue'import Cookies from 'js-cookie'import 'normalize.css/normalize.css' // A modern alternative to CSS resetsimport Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'import App from './App.vue'
import router from './router'
import store from './store'import { i18n } from './lang'; // Internationalization
import Axios from 'axios'Vue.use(Element, { size: Cookies.get('size') || 'medium', i18n: (key, value) => i18n.t(key, value) })
Vue.config.productionTip = falsenew Vue({router,store,i18n, // 语言国际化render: h => h(App)}).$mount('#app')
1.3 应用
注： 以$t(‘login.username’)这种方式切换中英文
<template><div class="manage"><div class="manageList"><!-- 操作栏 --><div class="title"><el-row><el-col :span="16"><el-form inline :model="searchParams"><el-form-item prop="loginId"><el-input v-model="searchParams.loginId" :placeholder="$t('login.username')" clearable /></el-form-item><el-form-item prop="name"><el-input v-model="searchParams.name" :placeholder="$t('user.username')" clearable /></el-form-item><el-form-item><el-button class="light-blue-btn" icon="el-icon-search" @click="searchClick">{{ $t('button.search') }}</el-button><el-button class="reset-button" icon="el-icon-refresh" @click="resetFun">{{ $t('button.reset') }}</el-button></el-form-item></el-form></el-col><el-col :span="8" style="text-align: right;"><el-buttonclass="green-btn"icon="el-icon-plus"@click="addUser"v-if="saveEnable">{{ $t('button.create') }}</el-button></el-col></el-row></div><!-- 表格 --><div class="tableList"><el-table:data="userListData"@selection-change="handleSelectionChange"height="100%"width="100%"@row-click="detail"class="elTableStyle"><el-table-column prop="loginId" :label="$t('login.username')" align="center" :show-overflow-tooltip="true" /><el-table-column prop="name" :label="$t('user.username')" align="center" :show-overflow-tooltip="true" /><el-table-column:label="$t('commonColumn.operation')"width="500"align="center"v-if="saveEnable || resetEnable"><template slot-scope="scope"><el-buttontype="text"icon="el-icon-edit":disabled="user.id === scope.row.id"@click.stop="edit(scope.row)"v-if="saveEnable">{{ $t('button.edit') }}</el-button><el-buttontype="text"icon="el-icon-edit":disabled="user.id === scope.row.id"@click.stop="resetPw(scope.row)"v-if="resetEnable">{{ $t('user.resetPassword') }}</el-button><el-buttontype="text"icon="el-icon-edit":disabled="user.id === scope.row.id"@click.stop="changePw(scope.row)"v-if="USER_LOGINID === $store.getters.user.loginId">{{ $t('home.changePassword') }}</el-button><el-buttontype="text"icon="el-icon-delete":disabled="USER_LOGINID === scope.row.loginId || user.id === scope.row.id"@click.stop="remove([scope.row])"v-if="deleteEnable">{{ $t('button.remove') }}</el-button></template></el-table-column></el-table></div><pagination :total="table.total" :page.sync="table.page" :limit.sync="table.size" @pagination="searchFun" /></div></div>
</template>
2. 通过页面添加国际化数据
现在的需求：不在是将国际化数据在文件里面，而是在系统上的页面添加数据即可。
CREATE TABLE `internationalize` (`id` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,`code_` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,`zh_` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,`en_` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,`version_` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = DYNAMIC;SET FOREIGN_KEY_CHECKS = 1;
直接在这个页面添加数据，即可实现国际化，而不需要去更改内部文件
2.1 做法
既然lang的index.js中从文件读取数据去实现国际化，我为了最大程度不影响其他代码，我想着更改这个文件的读取方式**（数据是从后台读取，然后将后端数据转换为 VueI18n 所需的格式，在数据加载完成后，重新设置 i18n 实例）**，这样不就改一下这个文件就能摒弃掉哪些配置文件，并且不需要变动其他代码。
2.2 lang的index.js文件修改
/* eslint-disable indent */
/* eslint-disable eol-last */
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui 英文包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui 中文包
import { internationalize } from '@/api/system'
import Cookies from 'js-cookie'Vue.use(VueI18n)let messages = {en: {...elementEnLocale},zh: {...elementZhLocale}
}// 初始化国际化信息
async function loadLocaleData() {try {// 后端国际化数据接口，记得放行 const response = await internationalize.findAll();const localeData = response.data;if (response.status === 1) { // 检查状态是否成功localeData.forEach(item => {// 将后端数据转换为 VueI18n 所需的格式messages.en[item.code] = item.en; // 为英文消息设置messages.zh[item.code] = item.zh; // 为中文消息设置});// 在数据加载完成后，重新设置 i18n 实例i18n.setLocaleMessage('en', messages.en);i18n.setLocaleMessage('zh', messages.zh);} else {console.error('Failed to load locale data: ');}} catch (error) {console.error('Failed to load locale data:');}
}const i18n = new VueI18n({// 设置语言 en || zhlocale: Cookies.get('language') || 'en',// 设置文本内容messages
})// 调用方法加载国际化数据
loadLocaleData();// export default i18n;
export { i18n, loadLocaleData };
入口文件不需要变化
2.3 需要注意的点
// 在修改和添加数据时，需要重新加载国际化数据，实时获取最新数据import {loadLocaleData} from '@/lang'// vue中添加和修改internationalize.saveUpdate(form).then((res) => {_this.$message({type: 'success',message: res.message})_this.visible = false;_this.getList();// 重新加载国际化数据loadLocaleData(); // 你需要导入 loadLocaleData 函数并调用它}
总结
写这篇博客主要的目的是让自己更深刻，有回忆点，然后就是分享自己的做法；有需要的根据自己的需求进行修改
写在最后
如果此文对您有所帮助，请帅戈靓女们务必不要吝啬你们的Zan，感谢！！不懂的可以在评论区评论，有空会及时回复。
