话不多说，直接上操作，按照下面步骤来，小白也能轻松实现语言切换功能......
第一步，下包
npm i vue-i18n
这里可以注意一下下包的版本号
第二步，创建src/lang/index.js
// 进行多语言支持配置
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
Vue.use(VueI18n) // 全局注册国际化包
// 创建国际化插件的实例
const i18n = new VueI18n({
// 指定语言类型 zh表示中文 en表示英文
locale: 'zh',
// 将elementUI语言包加入到插件语言数据里
messages: {
// 英文环境下的语言数据
en: {
...elementEN
},
// 中文环境下的语言数据
zh: {
...elementZH
}
}
})
// 配置elementUI 语言转换关系
locale.i18n((key, value) => i18n.t(key, value))
export default i18n
注意：element自带有英文包
第二步，在main.js中挂载 i18n的插件
// 省略其他...
import i18n from '@/lang'
// 加入到根实例配置项中
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
做完以上这些步骤，基本上可以实现语言切换功能了，但是上面功能必须搭配element组件使用，在项目中，有些地方比没有使用element组件，我们可以通过自定义组件语言配置
第一步，将自定义的语言包导进来
en.js 自定义英文包
zh.js 自定义中文包
- 给需要进行翻译的地方进行定义，中文包和英文包都需要，定义的名称必须一致
- 用$t('属性名')替换掉需要进行语言切换的地方，这里的$t是引入了i18n之后，自动挂载在vue实例上的功能。
- 手动将locale进行en和zh切换查看效果
- 如果想实现动态切换
- 可以封装多语言组件
- 通过this.$i18n.locale实现切换效果
