Vue国际化处理 vue-i18n 以及项目自动切换中英文

0. 直接上 预览连接

Vue国际化处理 vue-i18n 以及项目自动切换中英文

1. 环境搭建

命令进入项目目录，执行如下命令安装vue 国际化插件vue-i18n

npm install vue-i18n --save

2. 项目增长国际化翻译文件

在项目的src下添加lang文件夹增长中文翻译文件（zh_CN.js）以及英文翻译文件（EN.js），里面分别存储项目中须要翻译的信息。

lang文件获取地址

3. 项目引入

在项目的main.js中引入vue-i18n插件，引入对应的翻译文件（zh_CN.js/EN.js）引入并结合Element-UI 国际化。 入下图

4. 项目使用

在中文翻译文件zh_CN中引入Element-UI的中文脚本，在英文翻译文件EN中引入Element-UI的英文脚本，而且在文件中加入要翻译的内容，具体以下：

• Zh_CN.js:
• EN.js: 而后在要翻译的地方进行翻译。

若是是element-ui 的，在要翻译的前面加上冒号

好比：label=“用户姓名” 就改为 :label=”$t(‘order.userName’)”

若是是html 显示的，就改用如下写法：

直接写成 {{$t(‘order.userName’)}},就会直接去往翻译脚本里面自动匹配。

选择语言以后把记录存在cookie里面。

再次打开浏览器访问项目初始化的时候从cookie里面获得以前选择的语言。

至此整合完毕 源码地址

Vue学习大佬群493671066，美女多多。老司机快上车，来不及解释了。

做者相关Vue文章

基于Vue2.0实现后台系统权限控制

vue2.0-基于elementui换肤[自定义主题]

前端文档汇总

VUE2.0增删改查附编辑添加model(弹框)组件共用

打赏 衷心的表示感谢