JeecgBoot-antd JeecgVue前端国际化

原官方前端的国际化解决方案：
http://doc.jeecg.com/2043980

1.我的需求说明

在页面中，有个切换语言下拉框，切换语言后，页面切换所选择的语言，并且下次打开默认之前选择语言（目前只要求做到根据浏览器保存到本地。如果需要根据用户，就需要保存到数据库，记录到用户表中）。

注：

由于切换语言后，不刷新页面时效果不理想，有些部分内容不会切换，而且我的用户一般切换一次语言后，很少会再次切换语言，

因此我是通过 window.location.reload() 刷新页面使页面重新加载，完成语言切换

2.版本

Ant Design Jeecg Vue

*====*

当前版本： 2.4.3（发布日期：20210322）

#### 前端技术

- 基础框架：ant-design-vue - Ant Design Of Vue 实现

- JavaScript框架：Vue

- Webpack

- node

- yarn

- eslint

- @vue/cli 3.2.1

- vue-cropper - 头像裁剪组件

- @antv/g2 - Alipay AntV 数据可视化图表

- Viser-vue - antv/g2 封装实现

3.组件国际化

antd UI 组件国际化

文档参见【LocaleProvider 国际化】

ant-design-vue 所有语言包可以在 这里 找到

修改 App.vue 文件

<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view/>
    div>
  a-config-provider>
template>
<script>
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
  import enUS from 'ant-design-vue/lib/locale-provider/en_US'
  import enquireScreen from '@/utils/device'
  
  export default {
       
    data () {
       
      return {
       
        locale: enUS,
      }
    },
    created () {
       
   
      //获取本地缓存中的语言配置，并切换
      let language = this.$ls.get("language");
      if( language == 'zh-CN'){
        
          this.locale =  zhCN
      } else if(language == 'en-US'){
        
         this.locale = enUS
      }
    }
  }
script>
<style>
  #app {
       
    height: 100%;
  }
style>

4.业务文案的国际化需求

(1) 安装 vue-i18n：

$ npm install vue-i18n

(2) 创建语言js

在 src/components/lang/ 中 创建语言js 例如 en-US.js 和 zh-CN.js

在 en-US.js 和 zh-CN.js 中分别作了如下配置：

// zh-CN.js
export default {
     
  lang: '中文',
}

// en-US.js
export default {
     
  lang: 'English',
}

(3) 在main.js实例化组件

//i18n设置
import VueI18n from 'vue-i18n' 
import enLocale from '@/components/lang/en-US'
import zhLocale from '@/components/lang/zh-CN'
Vue.use(VueI18n)
// 注册i18n实例并引入语言文件，文件格式等下解析

const messages = {
     
  'en-US': {
     
    ...enLocale,
  },
  'zh-CN': {
     
    ...zhLocale,
  }
}

const i18n = new VueI18n({
     
  locale: Vue.ls.get("language", "zh-CN"),
  messages
})


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

5.切换语言

我放在系统设置中，如下图

修改 components/setting/SettingDrawer.vue

<h3 class="setting-drawer-index-title">整体风格设置 {
    { $t('lang') }}h3>


<a-list-item>
    <a-list-item-meta>
        <div slot="title">语言设置div>
    a-list-item-meta>
    <a-select size="small" style="width: 80px;" :defaultValue="$t('lang')" @change="handleLanguageChange">
        <a-select-option value="zh-CN">中文a-select-option>
        <a-select-option value="en-US">英文a-select-option>
    a-select>
a-list-item>

//script  中的  methods 里增加 handleLanguageChange 切换语言的事件
handleLanguageChange(lang){
 	//this.$i18n.locale = lang; //改变当前语言  动态无感 切换，，但是有部分内容 不生效，估计我
	this.$ls.set("language", lang);//将lang 语言存在localStorage里， 
	//本来想做成，页面不刷新语言自动切换，但是效果不理想，有的内容切换不成功，于是就 做刷新页面操作，这里只缓存语言
	window.location.reload()
}

6.使用

1）文本显示 { { $t(’…’) }}

如：

<h3 class="setting-drawer-index-title">整体风格设置 {
    { $t('lang') }}h3>

2）标签属性使用 :pros="$t(’…’)"

:defaultValue="$t(‘lang’)" 在属性前 加上 “ : ” 冒号 然后 $t(‘lang’)

如：

<a-select size="small" style="width: 80px;" :defaultValue="$t('lang')" @change="handleLanguageChange">
    <a-select-option value="zh-CN">中文a-select-option>
    <a-select-option value="en-US">英文a-select-option>
a-select>

3）script 中使用 this.$t(’…’)

使用 this.$t(’…’) 调用

如：

// 表头
columns: [
    {
     
        title: this.$t('common.field.type'),
        align: "center",
        dataIndex: 'type',
        width: 100,
        scopedSlots: {
     customRender: 'toI18nText'},
    },
]

4）table 列表中使用

字段结果I18n 处理 （适用固定状态、类型之类）

由于 customRender: function (t, r, index) { 中 不能调用 this.$t()

因此，通过 scopedSlots 模板方式 中处理 文本

// 表头
columns: [
    {
     
        title: this.$t('common.field.type'),
        align: "center",
        dataIndex: 'type',
        width: 100,
        scopedSlots: {
     customRender: 'toI18nText'},
    },
]

页面 toI18nText 模板标签

<a-table
        ref="table"
        size="middle"
        rowKey="id"
        :scroll="{x:true}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text">div>
        template>
  
        <span slot="toI18nText" slot-scope="text">
          {
    { $t('announcement.typeDict.'+text) }}
        span>
         
      a-table>
    div>

对应的 zh-CN.js 和 en-Us.js

// zh-CN.js 
export default {
     
  lang: '中文',
  announcement: {
      
    typeDict:{
     
      '1': '系统公告',
      '2': '维护公告', 
    }
  }
}

//  en-Us.js
export default {
     
  lang: 'English',
  announcement: {
      
    typeDict:{
     
      '1': 'System Announcement',
      '2': 'Maintain Announcement', 
    }
  }
}

经过测试发现

原先 customRender: function (t, r, index) { 中 不能调用 this.$t()

改成 拉姆达 表达式写法 就能使用this.$t() 如下例子

customRender: (type) => {
     
    return this.$t('announcement.typeDict.'+type)
}

5）传递参数 $t(’…’, {’…’: ‘…’})

zh-CN.js 和 en-Us.js

// zh-CN.js 
export default {
     
  field:{
     
  	title: '标题',
  },
  common:{
     
  	placeholder:{
     
      input: "请输入{content} !", 
    }
  }
}

//  en-Us.js
export default {
     
	field:{
     
  		title: 'Title',
  	},
   common:{
     
   	placeholder:{
     
      input: "Please input {content} !", 
    },
  }
}

页面组件使用 $t(’…’,{‘content’: ‘…’})

<a-input v-model="model.title" :placeholder="$t('common.placeholder.input',{
      'content': $t('common.field.title')})"  >a-input>
             

试了下 {} {0} 然后直接传参数 发现不行哈。

6）常用方法

$t(path, locale, option) // text 文本替换，locale可单独设置语言，option可传参数替换模板
$tc(path, choice, locale, option) // text+choice 比$t多一个choice，可以选择模板内容（模板内容间用 | 分隔，如 香蕉|苹果|梨，最多只能使用三个选项，下标从0开始，当选项为2个时下标从1开始~~）
$te(path) // text+exist 判断当前语言包中path是否存在
$d(number|Date, path, locale) // date 时间格式化
$n(number, path, locale) // number  数字格式化（货币等）

// 更多细节参考官方文档：https://kazupon.github.io/vue-i18n/api/#vue-injected-methods

7 其他组件国际化

1）富文本编辑器TinyMCE/ jeditor

修改 src/components/jeecg/JEditor.vue

富文本编辑器TinyMCE 默认 是英文，

对应你需要的语言就要到官方 https://www.tiny.cloud/get-tiny/language-packages/ 下载你需要的语言包，并且导入到你的项目中如：/tinymce/langs/zh_CN.js

//在script 中的 mounted() 中增加 语言设置
mounted() {
     
    this.initATabsChangeAutoReload()
	
    //根据语言切换
    let language = this.$ls.get("language");
    if (language == "en-US"){
     
        this.init.language = "en_US"
    } else if (language == "zh-CN"){
     
        this.init.language = "zh_CN"
        this.init.language_url = '/tinymce/langs/zh_CN.js'
    }

},