一、完整引入国际化

npm install vue-i18n

二、准备好,要切换的国际语言包

中英文语言包变化

三、在main,js中引入vue-i8语言包,进行和elementui国际化进行合并

import VueI18n from "vue-i18n"//引入element处理语言import ElementLocale from "element-ui/lib/locale"

四、实例化VueI18n,进行语言包绑定

  1. 在src下来新建一个language文件夹,在当前文件夹下面新建index.js,进行实例化代码

// 完成多语言的实例化import Vue from "vue"import Cookies from "js-cookie"import VueI18n from "vue-i18n"//引入element处理语言import enLocale from "element-ui/lib/locale/lang/en"import zhLocale from "element-ui/lib/locale/lang/zh-CN"// 我们准备好的语言包import CN from "./zh"import EN from "./en"​Vue.use(VueI18n)// 实例化export default new VueI18n({ // 默认展示是的语言 locale: Cookies.get("language") || "zh", // 消息主体 messages: {zh: { ...zhLocale, //elementui中文包 ...CN },en: { ...enLocale, //elementui英文包 ...EN }}, silentTranslationWarn: true})​

国际语言注册需要全局引入,所以要进行全局注册,

准备一个全局方法,进行调用切换

五、将实例化后的vuei8全局引入到main.js中,并且绑定方法,设置公共方法,进行循环

在main.js中引入实例化后vue-i8

// 引入我们实例化后vue-i18import i18n from "./language/index"//将我们实例化的vue-i8编写公共方法,绑定要elementui语言上ElementLocale.i18n((key, value) => i18n.t(key, value))// 把i18注册到Vue实例上new Vue({ router, store, i18n, render: (h) => h(App)}).$mount("#app")​

六、使用方法

在页面始终$t('')

七、编写中英文下拉组件

  1. 在src/components 文件夹下新建,lang文件夹,在lang文件夹下新建index.vue

        中文 en ​import Cookie from "js-cookie"export default { methods: {changeLanguage(lang) { Cookie.set("language", lang) // 切换多语言 this.$i18n.locale = lang // 设置给本地的i18n插件 this.$message.success("切换多语言成功") }}}​