多语言

配置：

使用i18n实现多语言功能，直接加载的多语言文件为/src/pubilc/locales。

编辑时使用表格，/localization/locales.xlsx，编辑完毕后，命令行运行：

npm run export-locales

脚本将取表格中的数据，生成文件覆盖掉/src/pubilc/locales中的多语言文件。

注意，在没有缓存的情况下，部署在服务器包中的前端文件的多语言文件，修改它后是可以立即生效的。

使用：

在组件或页面中使用this.$t('xx')获得多语言文本。
如果要将多语言文本作为数据源，将其写在computed中，否则切换多语言后数据不会自动更新。

# 在标签中
  <div>{{$t('xxx')}}</div>
# 在script中
  1. let a = this.$t('xx')
  2. data(){
    message:this.$t('xx')
     }
  3. computed:{
     message(){
    return this.$t('xx')
     }
     }
     适用于组件的placeholder、表格的columns等

在无法使用this.$t('xx')时，引入language.js,使用language.t('xxx')来获得多语言文本。

注意，使用这个方法获取的多语言，在多语言切换时，并不会自动更新渲染，需要手动监听切换事件，所以在页面中不使用这个方法。

import language from '/src/util/language.js'

let a = language.t('xx')

切换：

this.$store.dispatch('lang/change',{i18n:this.$i18n,locale:'zh'})

这里将多语言状态加入Vuex全局管理，以便在切换时可以监听切换事件。

监听切换事件：

在为某些组件提供数据时（例如select组件），因为其只在初始化时执行一次国际化，所以需要监听多语言变化，并重新赋值

    computed: {
      ...mapGetters([
        'lang'
      ])

    },
    watch:{
      lang(){
        console.log(this.lang)
      }
    },

在watch中重新为当前页面的文本赋值。