利用vue-i18n实现多语言切换
在vue项目中利用vue-i18n,我们可以实现多语言的切换,可以轻松搞定大部分的需求,包括中英文切换,以及词条的变更。
vue-i18n基本的使用方法
一、安装vue-i18n
npm install vue-i18n --save
二、main.js中引用
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh',
messages: {
'zh': require('../static/lang/zh'),
'en': require('../static/lang/en')
}
})
new Vue({
el: '#app',
router,
store,
i18n,
components: { App },
template: '<App/>'
})
上面提到的static/lang/zh.js和static/lang/en.js就是词条文件。
// zh.js module.exports = { helloworld: '你好,世界', helloname: '你好,{name}'}
// en.js module.exports = { helloworld: 'hello world', helloname: 'hello {name}'}
三、模板中使用词条
3.1、普通词条
插值表达式中向$t方法传入词条的key值就可以了,例如:<div>普通文本:{{$t('helloworld')}}</div>
3.2带参数词条
// 定义词条 helloman: 'hello {name}'
// 引用词条 <div>{{$t('helloman', {name: 'Tom'})}}</div>
3.3多元化
// 定义词条iphones: '{n} iphone5 | iphone6 | iphone7'
//引用词条
<div>Pluralization:{{$tc('iphones', 0, {n: '3台'})}}</div>
// 输出 Pluralization:3台 iphone5
<div>Pluralization:{{$tc('iphones', 1)}}</div>
// 输出 Pluralization:iphone6
四、语言切换
// 切换成英文 this.$i18n.locale = 'en'
利用vue-i18n实现多语言切换的更多相关文章
- vue中实现国际化--语言切换(转载)
https://segmentfault.com/a/1190000011800593
- vue 国际化i18n 多语言切换
安装 npm install vue-i18n 新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件 准备翻译信息 en.js export default { ho ...
- Element + Vue I18n动态import加载国际化语言包翻译文件
需求 项目为多页应用,包含产品a.b.c.d.e,每个产品都有自己的翻译文件.一次加载所有翻译文件是极度不合理的.于是考虑动态加载. 实现 参考官方文档:延迟加载翻译 项目结构 │ ├── dist ...
- vue 双语言切换中,data内翻译文字不正常切换的解决方案
背景 有这么一个登录页面,相关功能如下: 支持双语言,点击切换语言 表单内部有一个自定义的select,里面option的label.value都是的名字由外部提供:其中预设的option的label ...
- vue-i18n vue-cli项目中实现国际化 多语言切换功能 一
vue-cli项目中引入vue-i18n 安装: npm install vue-i18n可参考vue-i18n官网文档 main.js中引入: import Vue from 'vue' impor ...
- Vue-i18n实现语言切换
方法1 Vue — i18n 国际化 全局配置 安 装 1.直接引入js文件 <script src="https://unpkg.com/vue/dist/vue.js"& ...
- vue-i18n 国际化语言切换
vue-i18n 用于前端vue项目中,需要多语言切换的场景 安装方法(npm) npm install vue-i18n 简单使用 1.在vue项目的main.ts文件中实例化 i18n imp ...
- jquery/vue/react前端多语言国际化翻译方案指南
❝ 本文章共3470字,预计阅读时间5-10分钟. ❞ 国际化-前言 每个开发者能希望编写的程序可以让全世界的用户使用,它要求从产品中抽离所有地域语言,国家/地区和文化相关的元素.换种说法,「应用程序 ...
- QT实现多语言切换
功能需求: 网盘客户端要能够实现多国语言的切换,第一版要支持中.英文的切换.在实现过程中感觉QT对多国语言的支持还是很不错的,制作多语言包很方便,切换的逻辑也很简单.下面就来看一下QT中如何制作多语言 ...
随机推荐
- Ehab and a 2-operation task【数论思想】
Ehab and a 2-operation task 题目链接(点击) You're given an array aa of length nn. You can perform the foll ...
- UIPopoverPresentationController的使用
前言 最近项目中很多地方有一个相同的需求,那就是点击一个按钮的时候在按钮的某一个方向弹出一个视图,这个视图需要带有一个箭头指向,就像下图一样.要实现这个功能,就要用到UIPopoverPresenta ...
- (六)获取http状态码和处理返回结果
int StatusCode = httpResponse.getStatusLine().getStatusCode(); 处理返回结果: /** * 处理返回结果 * @param respons ...
- java中工厂模式
最近在项目中使用了工厂模式来重构下之前的代码,在这里做个小结. 工厂模式最主要的特点是每次新增一个产品的时候,都需要新增一个新的工厂,这样在对于新的产品做扩展的时候,减少对客户端代码的修改. 我在项目 ...
- EJB JMS javax.naming.NameNotFoundException: XXX not bound
练习EJB MessageDrivenBean时部署不成功,一直报错 09:57:29,017 WARN [JmsActivation] Failure in jms activation org.j ...
- Apache POI 操作Excel(1)--POI简介
Apache POI(http://poi.apache.org/)是一个用于读取和编写Microsoft Office文件格式开源的Java项目,现在已经可以操作Excel,PowerPoint,W ...
- mycat增加开机自启
一.安装及配置: 见https://github.com/MyCATApache/Mycat-Server 二.增加开机自启: 1.添加开机自启脚本:vim /etc/init.d/mycat.sh, ...
- Python-使用tkinter实现的摇骰子小游戏
贴吧看到的一个求助题,大致需求是:3个人摇骰子,每人摇3次,点数之和最大的获胜,支持玩家名称输入.我觉得这个题目挺有意思的,做了个界面程序,欢迎大家交流指正~ #!usr/bin/env python ...
- Java_面试札记
Java_面试札记 为了不死,我愿献出生命 背景:记录下寄几和friend在2020年Java面试中遇到的problem. 1.MySQL索引结构? 基本上所有的索引都是B-Tree结构,还有一部分 ...
- SQL注入原理及代码分析(一)
前言 我们都知道,学安全,懂SQL注入是重中之重,因为即使是现在SQL注入漏洞依然存在,只是相对于之前现在挖SQL注入变的困难了.而且知识点比较多,所以在这里总结一下.通过构造有缺陷的代码,来理解常见 ...