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文章
打赏 衷心的表示感谢
Vue国际化处理 vue-i18n 以及项目自动切换中英文的更多相关文章
- AutoCAD神器! AutoCAD自动切换中英文输入法插件(ZDSRF)
AutoCAD神器! AutoCAD自动切换中英文输入法插件 (一)功能特点: CAD命令中只能输入英文字符,不能输入中文,在文字编辑.文字输入.尺寸编辑中经常需要输入中文,此时就需要频繁的切换输入法 ...
- vue中npm run dev运行项目自动打开浏览器
npm run dev运行项目自动打开浏览器设置自动打开浏览器 // 各种设备设置信息 host: 'localhost', //主机名 port: 8080, // 端口号(默认 ...
- 在 Visual Studio 等编辑器/IDE中自动切换输入法,不需要手动的有没有?
使用Visual Studio写代码,经常遇到的一个问题就是切换中文输入法麻烦,输入完注释//,要切换到中文,输入完引号,要输入中文,然后还需要切换回来,有没有? 有时候中文输入法忽然失效有没有?明明 ...
- vue中npm run dev运行项目不能自动打开浏览器! 以及 webstorm跑vue项目jshint一直提示错误问题的解决方法!
vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的 ...
- vue 国际化i18n 多语言切换
安装 npm install vue-i18n 新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件 准备翻译信息 en.js export default { ho ...
- vue项目自动构建工具1.0,支持多页面构建
该工具适用于超多项目开发,每个项目不用都安装依赖,所有依赖都安装在ffk命令项目中,对于多分支拉到本地进行开发,亦有益处.对于多页面开发,也是相当便利,不用手动撸entry和plugin. git: ...
- 一个关于vue+mysql+express的全栈项目(二)------ 前端构建
一.使用vue-cli脚手架构建 <!-- 全局安装vue-cli --> npm install -g vue-cli <!-- 设置vue webpack模板 --> vu ...
- 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之自定义组件(四)
基于Vue和Quasar的前端SPA项目实战之序列号(四) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实 ...
- node+vue进阶【课程学习系统项目实战详细讲解】打通前后端全栈开发(1):创建项目,完成登录功能
第一章 建议学习时间8小时·分两次学习 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章]) 视频教程地 ...
随机推荐
- Java8新特性第3章(Stream API)
Stream作为Java8的新特性之一,他与Java IO包中的InputStream和OutputStream完全不是一个概念.Java8中的Stream是对集合功能的一种增强,主要用于对集合对象进 ...
- PHP / Laravel 月刊 #23
最新资讯 Laravel 5.6 中文文档翻译完成,译者 60 人,耗时 10 天 Summer Dingo API 中文文档翻译召集[已完成] Summer 我最喜欢 Laravel 5.6 的三个 ...
- python基础—函数装饰器
python基础-函数装饰器 1.什么是装饰器 装饰器本质上是一个python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能. 装饰器的返回值是也是一个函数对象. 装饰器经常用于有切 ...
- 基于OpenCV单目相机的快速标定--源码、工程、实现过程
相机的标定是所有人走进视觉世界需要做的第一件事,辣么多的视觉标定原理解释你可以随便在网上找到,这里只讲到底如何去实现,也算是给刚入门的朋友做个简单的分享. 1.单目相机标定的工程源码 首先请到同性交友 ...
- WPF 字符串溢出判断,字符串长度是否超过控件宽度
TextBloc可以将TextTrimming属性设置为CharacterEllipsis 其他控件可以在控件大小变更或者其他事件上附加下列方法 private void OnEllipsis(obj ...
- React 深入系列3:Props 和 State
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...
- C#多线程Thread.Join()的详解
class TestThread { private static void FirstThreadFun() { ; i < ; i++) { Console.WriteLine(Thread ...
- JavaScript 散列表(HashTable)
TypeScript方式实现源码 // 特性: // 散列算法的作用是尽可能快地在数据结构中找到一个值. 在之前的章节中, 你已经知道如果 // 要在数据结构中获得一个值(使用get方法) ,需要遍历 ...
- springboot AOP全局拦截日志记录
@Aspect@Component@Slf4jpublic class WebLogAspect { @Pointcut("execution(public * com.we.control ...
- MySQL的安全机制
MySQL的安全机制: 1.MySQL登录 mysql -u账户 -p密码 -h127.0.0.1 -P端口 数据库名 mysql -h hostname|hostIP -p port -u user ...