vue国际化步骤

前端改造部分

引入: vue-i18n相关包

npm i vue-i18n@8.27.0

当前vue项目2.6版本的，需要注意的是和最新的vue-i18n有冲突，别使用最新版本

src文件夹下创建一个国际化语言文件夹langurage,在文件夹下创建三个文件

en.js
zh.js
index.js

en.js

 
export default{
    hbase_sys_page: {
       _key: 'key（key）',
       _id: 'id',
       _value: 'value（value）',
       _desc: 'describe',
       _gengxinren: 'Updated by',
       _chuangjianriqi: 'Created on',
       _gengxinriqi: 'Update date',
       _caozuo: 'operation',
    } ,
     hbase_sys_index:{
        _management: 'configuration management',
        _new: 'New',
        _help: 'Help Information',
        _prompt: ' Configuration center prompt (non developers are not allowed to operate this page);',
        _non_repeatable: 'The key value is unique and cannot be repeated;',
        _new_configuration: 'New Configuration',
        _update_configuration: 'Modify Configuration',
     }
     }

zh.js

// 1、创建中文语言包对象
export default{
 hbase_sys_page: {
    _key: '键（key）',
    _id: 'id',
    _value: '值（value）',
    _desc: '描述',
    _gengxinren: '更新人',
    _chuangjianriqi: '创建日期',
    _gengxinriqi: '更新日期',
    _caozuo: '操作',
 } ,
 hbase_sys_index:{
    _management: '配置管理',
    _new: '新建',
    _help: '帮助信息',
    _prompt: ' 配置中心提示（非开发人员请勿操作此页面）;',
    _non_repeatable: 'key值唯一不可重复;',
    _new_configuration: '新建配置',
    _update_configuration: '修改配置',
 }
  }

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 从语言包文件中导入语言包对象
import zh from './zh.js'
import en from './en.js'
Vue.use(VueI18n)
const messages = {
  zh,
  en
}
const i18n = new VueI18n({
  messages,
  locale: 'en'
})
export default i18n
 

main.js 修改

import i18n from './langurage'; 

  new Vue({
    router,
    store,
    i18n,
    render: (h) => h(App),
  }).$mount('#app');
}

vue页面的相关改造

js部分

this.$t('key.value')

<script>
      columns: [
        {
        title: this.$t('hbase_sys_page._id'),
          width: 60,
          dataIndex: 'id',
          fixed: 'left',
          align: 'left',
          defaultSortOrder: 'descend',
          sorter: (a, b) => a.id - b.id,
          scopedSlots: { customRender: 'id' },
        }]
  </script>

vue模板部分

$t('key.value')

 <div class="base-page">
      <jmd-title :title="$t('hbase_sys_index._management')"></jmd-title>
      <div class="base-form-wrap--search">
        <base-form ref="baseFormRef"
                   @sure="getData"></base-form>
      </div>

{{ $t('key.value') }}

 <div class="table-operate-button-wrap">
        <div class="table-operate-button-wrap-left">
          <jmd-button type="custom" @click="openAddDrawer"
                      icon="iconfont-com icon-plus"> {{ $t('hbase_sys_index._new') }}
          </jmd-button>
        </div>
      </div>