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