Ant-design-vue 国际化

1.先现在项目中安装vue-i18n的依赖

npm install vue-i18n@8   /  yarn add  vue-i18n@8 

2.在public文件夹下新建languages文件夹，在新建langs文件夹和i18n.js，langs文件夹下新建index.js、cn.js、en.js
内容如下图

3.在main.js中导入语言包,在vue上挂载

import i18n from '../public/languages/i18n'
new Vue({
  router,
  store,
  i18n,
  render: h => h(App),
}).$mount('#app')

4.在app.vue文件中引入多语言文件和我们写切换的方法

this.$root.Bus.$emit(“switchLanguage”, “cn/en”)这个方法可以简单理解就是我们在这里定义了一个方法，在别的组件我们只要调用这个方法就可以切换多语言，在登录或者其他需要切换语言的地方调用
moment.locale(“cn”);这个是ant-design-vue内部组件的国际化切换方法。
this.$root.Bus.$on(),这个是组件传值的一种方式，需要在main.js中配置
new Vue({ router, store, i18n, render: h => h(App), data: { Bus: new Vue() } }).$mount('#app')

页面中中我们用

:label="$t('login.username')"     //     {
   
   {$t('login.login')}}

js中我们用

this.$t("logistics.search")

在login.vue（你可以是任意组件中）写调用方法

    <a-select default-value="cn" @change="handleChange">
          <a-select-option value="cn"> 中文/简体 </a-select-option>
          <a-select-option value="en"> EngLish </a-select-option>
        </a-select>

 handleChange(value) {
      this.$root.Bus.$emit('switchLanguage', value)
    },

亲测
this.isRouterAlive = false //先关闭， this.$nextTick(() => { this.isRouterAlive = true //再打开 }) 会影响ui库组件事件执行

 *如果项目中数据是由后端翻译返回的， 选择语言切换的时候需要调用接口 刷新页面*

在app/vue里定义刷新页面方法，

 provide() {
    return {
      reload: this.reload,
    }
  },
  reload() {
      this.isRouterAlive = false
      // 刷新页面
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    },

在需要调用的地方引入

inject: ['reload'],
调用方法    =》  this.reload()