通过页面添加国际化数据，实现vue的国际化

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 || zh
    locale: 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 resets

import 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 = false

new 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-button
              class="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-button
                type="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-button
                type="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-button
                type="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-button
                    type="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 || zh
    locale: 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 函数并调用它
                            }