1. 环境搭建
命令进入项目目录, 执行以下命令安装 vue 国际化插件 vue-i18n
npm install vue-i18n --save
2. 项目增加国际化翻译文件
在项目的 src 下添加 lang 文件夹增加中文翻译文件 (zh_CN.js) 以及英文翻译文件(EN.js), 里面分别存储项目中需要翻译的信息.
lang 文件获取地址 https://github.com/PanJiaChen/vue-element-admin/tree/master/src/lang
3. 项目引入
在项目的 main.js 中引入 vue-i18n 插件, 引入对应的翻译文件 (zh_CN.js/EN.js) 引入并结合 Element-UI 国际化.
入下图
vue-i18n
4. 项目使用
在中文翻译文件 zh_CN 中引入 Element-UI 的中文脚本, 在英文翻译文件 EN 中引入 Element-UI 的英文脚本, 并且在文件中加入要翻译的内容, 具体如下:
Zh_CN.js:
EN.js:
然后在要翻译的地方进行翻译.
如果是 element-ui 的, 在要翻译的前面加上冒号
比如: label="用户姓名" 就改成 :label="$t('order.userName')"
如果是 html 显示的, 就改用以下写法:
直接写成 {{$t('order.userName')}}, 就会直接去往翻译脚本里面自动匹配.
至此整合完毕
来源: http://www.jianshu.com/p/2240cf644250