一、完整引入国际化
npm install vue-i18n
二、准备好,要切换的国际语言包
中英文语言包变化
三、在main,js中引入vue-i8语言包,进行和elementui国际化进行合并
import VueI18n from "vue-i18n"//引入element处理语言import ElementLocale from "element-ui/lib/locale"
四、实例化VueI18n,进行语言包绑定
在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('')
七、编写中英文下拉组件
在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("切换多语言成功") }}}