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

至此整合完毕

作者相关Vue文章

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

前端文档汇总

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

打赏 衷心的表示感谢

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

时间： 2024-11-03 21:49:16

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

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

npm run dev运行项目自动打开浏览器设置自动打开浏览器 // 各种设备设置信息      host: 'localhost', //主机名      port: 8080, // 端口号(默认8080)      autoOpenBrowser: false, //是否自动打开浏览器 //想让浏览器自动打开,只需将false改为true即可,为防止端口号冲突,这里也可以随意更改端口号 autoOpenBrowser: true,  //是否默认打开浏览器,默认是false,改为true即

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

一.使用vue-cli脚手架构建 1 <!-- 全局安装vue-cli --> 2 npm install -g vue-cli 3 <!-- 设置vue webpack模板 --> 4 vue init webpack my-project 5 <!-- 进入项目 --> 6 cd my-project 7 <!-- 安装依赖 --> 8 npm install 9 <!-- 启动项目 --> 10 npm run dev 二.安装axios并

用 Vue 改造 Bootstrap，渐进提升项目框架

前言 Vue 横空出世,以迅雷不及掩耳之势横扫前端界,俨然有当年 jQuery 之势.我认为 Vue 成功的关键在于三点: 学习曲线平缓,有点经验的前端基本上一天就能看完文档,然后就可以上手操作. 上升空间很大,组件化/路由/Vuex/Ajax,生态完整,架构强壮,用它构建中大型项目也很容易. API 设计优雅,并且和标准很友好. 但是在我看来,很多 Vue UI 组件库反倒走在一条错误的道路上:过分追大求全.比如说,第一个组件多半是 Grid,CSS 能搞定的事情为什么要做成组件?前端本来就是

用 Vue 改造 Bootstrap，渐进提升项目框架[转]

GitChat 作者:Meathill 原文:用 Vue 改造 Bootstrap,渐进提升项目框架 关注微信公众号:「GitChat 技术杂谈」 一本正经的讲技术 [不要错过文末彩蛋] 前言 Vue 横空出世,以迅雷不及掩耳之势横扫前端界,俨然有当年 jQuery 之势.我认为 Vue 成功的关键在于三点: 学习曲线平缓,有点经验的前端基本上一天就能看完文档,然后就可以上手操作. 上升空间很大,组件化/路由/Vuex/Ajax,生态完整,架构强壮,用它构建中大型项目也很容易. API 设计优雅

vue国际化demo

最近自己研究vue-i18n做了个vue国际化的demo,总结如下 第一步.安装vue-i18n npm install vue-i18n 第二步.在main.js中引入vue-i18n(如下图) 第三步.建两个语言包文件,目录结构如下图: 第四步.给这两个文件里写静态的页面展示数据 1.en.js(内容如下图) 2.zh.js(内容如下图) 第五步:1.html里面使用如下图 第六步:接口层面实现多语言,方案为: 在HTTP请求头中携带语言信息,接口服务根据语言,返回不同的语言环境响应体. 本

vue、react等单页面项目部署到服务器的方法及vue和react的区别

最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...用react做的项目也同样遇到类似问题.现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.so

ASP.NET Core 实战：使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

 一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自己的职业发展还是很有帮助的.毕竟,现在都快到9102年了,如果你还是只会 Web Form,或许还是能找到很多的工作机会,可是,这真的不再适应未来的发展了.如果你准备继续在 .NET 平台下进行开发,适时开始拥抱开源,拥抱 ASP.NET Core,即使,现在工作中可能用不到. 雪崩发生时,没有一

Vue - 实现双击显示编辑框；自动聚焦点击的显示框；点击编辑框外的地方，隐藏编辑框

实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚焦点击的显示框. 第三是点击编辑框外的地方,隐藏编辑框. 一二点都是在startPipeLineNameEdit这个method中去实现. 2. 实现双击显示编辑框 思路: 使用两个span包含双击前和双击后的代码,用isEditingPipeLineName这个变量去控制显示与否.(PipeLin

【实战】Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目

使用Vue全家桶开发移动端页面. 本博文默认已安装node.js. github链接 一.准备工作 安装vue npm install vue 安装脚手架vue-cli npm install -g @vue/cli 创建webpack项目 vue init webpack my-app 运行 cd my-app npm run dev 按照提示,在浏览器打开http://localhost:8082/,效果如下: 安装状态管理vuex npm install vuex --save-dev 目