首先新建结构文件夹
1.下载i18n插件
npm install vue-i18n --save
2.配置i18n.js文件
import { createI18n} from 'vue-i18n'
import message from './langs'
const localeData = {legacy: true, // composition APIlocale: '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.localethis.$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.languageif (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部分：
搞定！！！！！
