首页 > 其他 > 详细

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

时间:2018-04-30 15:26:53      阅读:269      评论:0      收藏:0      [点我收藏+]

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’)}},就会直接去往翻译脚本里面自动匹配。

至此整合完毕

作者相关Vue文章

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

前端文档汇总

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

打赏 衷心的表示感谢

技术分享图片

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

原文:https://www.cnblogs.com/nxmin/p/8973534.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!