使用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   })

 

posted @ 2019-11-08 10:49  zaijinyang  阅读(3226)  评论(0编辑  收藏  举报