VueJS 使用i18n做国际化切换中英文

1、安装

npm install vue-i18n --save

2、创建存放语言包和i18n入口文件

　　a、在src下创建i18n目录

　　b、在src/i18n/创建i18n.js （入口）

　　c、在src/i18n/创建langs目录存放语言包

　　d、在src/i18n/langs/创建en.js(英文) 和 zh.js(中文)两个文件

　　 VueJS 使用i18n做国际化切换中英文

i18n.js

 1 import Vue from 'vue'
 2 import locale from 'element-ui/lib/locale';
 3 import VueI18n from 'vue-i18n'
 4 //import messages from './langs'
 5 
 6 //自定义中英文包
 7 import zh from './langs/zh'
 8 import en from './langs/en'
 9 
10 //element 中英文包
11 import enLocale from 'element-ui/lib/locale/lang/en'
12 import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
13 Vue.use(VueI18n)
14 
15 const messages = {
16   en: Object.assign(en, enLocale),
17   zh: Object.assign(zh, zhLocale)
18 }
19 //从localStorage中拿到用户的语言选择，如果没有，那默认中文。
20 /*const i18n = new VueI18n({
21     locale: localStorage.lang || 'zh',
22     messages,
23 })*/
24 const i18n = new VueI18n({
25   locale: localStorage.getItem('locale') || 'en',
26   messages 
27 })
28 locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换
29 console.log('%c当前缓存语言是：'+(localStorage.getItem('locale')=='en'?'English':'中文')+'','color:#fff;background:green;padding:4px;border-radius:5px');
30 export default i18n