vue3+antd 实现国际化 切换中英文

首先新建结构文件夹

1.下载i18n插件

 npm install vue-i18n --save 

2.配置i18n.js文件

import { createI18n} from 'vue-i18n'
import message from './langs'
const localeData = {
    legacy: true, // composition API
    locale: 'cn',
    messages: message,
}
const i18n = createI18n(localeData);

export default i18n;

3.langs的index.js

import en from './us-en.js' //导入英文语言包
import cn from './zh-cn.js' //导入英文语言包
export default {
    en: en,
    cn: cn
}

4.中英文的语言包

         zh-cn.js 中文语言包

import goods from './cn/goods.js' 
var localeValues = {
    menu: {
        goods
    }
};

export default localeValues;

因为整个项目的语言包会很庞大，为了后期的维护，我将每个模块都分了出去

langs/cn/goods.js

export default {
    list:'产品列表'
}

        us-en.js 英文语言包

var localeValues = {
    menu: {
        goods: {
            list: 'goods list'
        }
    }
};

export default localeValues;

5.语言包准备好了之后，需要去main.js使用

6.到这语言包就导入完成了，并且可以实现翻译了，但是翻译的语言是固定的，不会动态切换

7.做一个切换按钮，在切换事件中 改变语言包

 这是切换的按钮 @change是切换的事件

            <a-radio-group v-model:value="locale" style="margin-left: 16px" @change="changeLanguage">
              <a-radio-button key="en"  value="en">English</a-radio-button>
              <a-radio-button key="cn" value="cn">中文</a-radio-button>
            </a-radio-group>

效果图：

 切换事件调用的方法：

    //切换语言
    changeLanguage(){
      this.$root.$i18n.locale = this.locale
      this.$store.commit('setLanguage',this.locale)
    },

核心：this.$root.$i18n.locale = this.locale 可以切换语言  this.locale是语言的标识(cn’，英文：‘en’)

8.需要在vuex里加上一个变量，用来标识现在是什么语言

切换方法

9.现在就实现了我们自定义的文字切换中英文，但是我们用的组件没有办法切换。我用的是antd，如果用的其他组件库可以去看看文档。

 导入antd的国际化语言包

import zhCN from 'ant-design-vue/es/locale/zh_CN';
import enGB from 'ant-design-vue/es/locale/en_GB';

在App.vue的最外层包裹上a-config-provider标签，并且加上:locale的属性

 在data里声明变量

locale获取当前的语言是中文还是英文,之后要用来判断

在App.vue里写一个监听，监听vuex里的language，变了说明切换语言了，在监听里获取language来判断是中文还是英文。enGB和zhCN是我们导入的antd的包

  watch: {
      '$store.state.language'(newval, oldval) {
        this.locale = this.$store.state.language
        if (this.locale === 'en') {
          this.language = enGB
        } else {
          this.language = zhCN
        }
        // console.log('===============================');
        // console.log(this.language.Menu.Goods.goods_list);
      }
  },

 在mounted里需要在获取一次进行判断，不然刷新页面就会变成默认的

这样就可以实现切换中英文啦！！！

10.在页面上使用翻译

以上内容是对翻译的配置，接下来如何在页面上使用呢？分别在vue2 vue3的写法使用

vue2:

因为我们在main.js已经配置了，页面上直接使用this.$t()就可以用了

在html部分 

js部分：

vue3写法:

   1.需要导入

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

2.在页面使用

js部分

 

html部分：

 

搞定！！！！！