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 以及项目自动切换中英文的更多相关文章

  1. AutoCAD神器！ AutoCAD自动切换中英文输入法插件（ZDSRF）

    AutoCAD神器! AutoCAD自动切换中英文输入法插件 (一)功能特点: CAD命令中只能输入英文字符,不能输入中文,在文字编辑.文字输入.尺寸编辑中经常需要输入中文,此时就需要频繁的切换输入法 ...

  2. vue中npm run dev运行项目自动打开浏览器

    npm run dev运行项目自动打开浏览器设置自动打开浏览器 // 各种设备设置信息      host: 'localhost', //主机名      port: 8080, // 端口号(默认 ...

  3. 在 Visual Studio 等编辑器/IDE中自动切换输入法，不需要手动的有没有？

    使用Visual Studio写代码,经常遇到的一个问题就是切换中文输入法麻烦,输入完注释//,要切换到中文,输入完引号,要输入中文,然后还需要切换回来,有没有? 有时候中文输入法忽然失效有没有?明明 ...

  4. vue中npm run dev运行项目不能自动打开浏览器! 以及 webstorm跑vue项目jshint一直提示错误问题的解决方法！

    vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的 ...

  5. vue 国际化i18n 多语言切换

    安装 npm install vue-i18n 新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件 准备翻译信息 en.js export default { ho ...

  6. vue项目自动构建工具1.0，支持多页面构建

    该工具适用于超多项目开发,每个项目不用都安装依赖,所有依赖都安装在ffk命令项目中,对于多分支拉到本地进行开发,亦有益处.对于多页面开发,也是相当便利,不用手动撸entry和plugin. git: ...

  7. 一个关于vue+mysql+express的全栈项目（二）------ 前端构建

    一.使用vue-cli脚手架构建 <!-- 全局安装vue-cli --> npm install -g vue-cli <!-- 设置vue webpack模板 --> vu ...

  8. 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之自定义组件（四）

    基于Vue和Quasar的前端SPA项目实战之序列号(四) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实 ...

  9. node+vue进阶【课程学习系统项目实战详细讲解】打通前后端全栈开发(1)：创建项目，完成登录功能

    第一章 建议学习时间8小时·分两次学习      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章]) 视频教程地 ...

随机推荐

  1. 通过wget工具下载指定文件中的URLs对应的资源并保存到指定的本地目录中去并进行文件完整性与可靠性校验

    创建URLs文件在终端输入cd target_directory回车,便把当前文件夹切换到了目标文件夹target_directory,此后创建的文件都会丢它里面在终端输入cat > URLs回 ...

  2. POJ1017 Packets---贪心

    题目链接: https://vjudge.net/problem/POJ-1017 题目大意: 公司共有底面面积为1*1.2*2.3*3.4*4.5*5.6*6,高度同为H的六种产品,现在需要用最少的 ...

  3. 使用开源数据库客户端DBeaver连接DB2数据库

    下载安装 首先进入 官网 选择对应的版本进行安装. 下载下来后,一直惦记next即可完成安装(期间包括选择文件安装路径等操作,可按需修改). 连接db2 打开DBeaver,新建连接-->DBe ...

  4. OpenShift实战(六)：OpenShift日志监控EFK

    1.镜像下载 为了防止安装过程中由于镜像下载缓慢导致自动部署失败,所以首先提前下载好EFK镜像. docker pull openshift/origin-logging-fluentd docker ...

  5. [HAOI2016]找相同字符

    题目描述 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两个子串中有一个位置不同. 输入输出格式 输入格式: 两行,两个字符串s1,s2,长度分别为 ...

  6. 洛谷P1593 因子和

    题目描述 输入两个正整数a和b,求a^b的因子和.结果太大,只要输出它对9901的余数. 输入输出格式 输入格式: 仅一行,为两个正整数a和b(0≤a,b≤50000000). 输出格式: a^b的因 ...

  7. empty()和size()的优劣

    通常下面代码: if(c.size() == 0) if(c.empty()) 我们会觉得它们是是等价的. 为何empty()比较好? 主要是他们之间的效率有一定差距: empty对任意的容器都是常数 ...

  8. poj 1811 随机素数和大数分解（模板）

    Sample Input 2 5 10 Sample Output Prime 2 模板学习: 判断是否是素数,数据很大,所以用miller,不是的话再用pollard rho分解 miller : ...

  9. Codeforces Round#432 简要题解

    来自FallDream的博客,未经允许,请勿转载,谢谢. Div2A 小判断题 Div2B 小判断题,合法的条件是|AB|=|BC|且三点不共线 Div1A 类比二维.三维空间,可以猜测n太大的时候没 ...

  10. hdu 3433 A Task Process 二分+dp

    A Task Process Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...