使用vue国际化中出现内置的组件无法切换语言的问题(element-ui、ivew)
在main.js中引入对应组件的语言包
eg:
1 import VueI18n from 'vue-i18n'; // 引入国际化 2 import elementEn from 'element-ui/lib/locale/lang/en'; // element-ui 英语语言包 3 import elementZh from 'element-ui/lib/locale/lang/zh-CN'; // element-ui 中文语言包 4 5 import ivewZh from 'iview/dist/locale/zh-CN'; // ivew 中文语言包 6 import ivewEn from 'iview/dist/locale/en-US'; // ivew 英文语言包 7 8 import zh from './i18n/lang/zh'; // 自己的中文语言包 9 import en from './i18n/lang/en'; // 自己的英文语言包 10 // 这是主要没改变的问题所在 11 Vue.use(iView, { 12 i18n: (key, value) => i18n.t(key, value) 13 }); 14 Vue.use(ElementUI, { 15 i18n: (key, value) => i18n.t(key, value) 16 }); 17 Vue.use(VueI18n); 18 19 //语言国际化 20 const messages = { 21 'zh': { 22 ...zh, 23 ...elementZh, 24 ...ivewZh 25 }, // 中文语言包 26 'en': { 27 ...en, 28 ...elementEn, 29 ...ivewEn 30 } //英文语言包 31 }; 32 // 通过cookie存储 33 export function getLanguage() { 34 const chooseLanguage = Cookies.get('language'); 35 if (chooseLanguage) return chooseLanguage; 36 37 const language = (navigator.language || navigator.browserLanguage).toLowerCase(); 38 const locales = Object.keys(messages); 39 for (const locale of locales) { 40 if (language.indexOf(locale) > -1) { 41 return locale; 42 } 43 } 44 return 'en'; 45 } 46 47 const i18n = new VueI18n({ 48 locale: getLanguage(), // 语言标识 49 messages 50 }) 51 52 new Vue({ 53 el: '#app', 54 i18n 55 })
希望大佬看到有不对的地方,提出博主予以改正!