一分钟上手Vue VueI18n Internationalization(i18n)多国语言系统开发、国际化、中英文语言切换!

这里以Vue2为例子

第一步:安装vue-i18n

npm install vue-i18n@8.26.5

第二步:在src下创建js文件夹,继续创建language文件夹

在language文件夹里面创建zh.js、en.js、index.js这仨文件

这仨文件代码分别如下:

zh.js

export default {word1: "中国必然崛起!",word2: "中文是伟大的语言",
}

小技巧Tip:还可以用对象的方式加入语言内容,譬如
word:{
    label1: "中国必然崛起!",
    label2: "中文是伟大的语言",
}

在调用的时候就用$t('word.label1')、$t('word.label1')就可以了,这样更加方便归类同一个栏目菜单下的词汇变量

en.js

export default {word1: "China is NB!",word2: "Chinese is great language",
}

 index.js

import Vue from 'vue'; import VueI18n from 'vue-i18n';//npm install vue-i18n@8.26.5
Vue.use(VueI18n);
//引入国际化变量文件
import zh from './zh';//中文
import en from './en';//英语
// ...可以按照上面的方式,继续添加其他语言
let messages = { zh, en, };
let defaultLang = 'zh';//默认是中文
Object.keys(messages).includes(localStorage.language) || (localStorage.language = defaultLang);
let locale = localStorage.language;
export default { locale, messages, defaultLang };

第三步:在main.js文件里面引入i18n

// 【多国语言】----------------------------------------------------------------
import i18n from './language';//引入多语言配置文件index.js//【初始化加载】----------------------------------------------------------------
import App from '../vue/App';
new Vue({el: '#app',render: h => h(App),router,store: vuex,i18n, //把i18n挂载在全局上
});

第四步:应用文件

<template><div><h1>{{ $t('word1') }}</h1><h2>{{ $t('word2') }}</h2><hr><el-button @click="changeLanguage('zh')" v-if="this.$i18n.locale !== 'zh'" type="success">中文</el-button><el-button @click="changeLanguage('en')" v-if="this.$i18n.locale !== 'en'" type="danger">英文</el-button></div>
</template>
<script>
import i18n from '@/js/language';//引入多语言配置文件index.js
export default {created() {this.addEvents();},methods: {changeLanguage(curLang) {Object.keys(i18n.messages).includes(curLang) || (curLang = i18n.defaultLang);this.$i18n.locale = curLang;localStorage.language = curLang;},addEvents(d) {this.removeEvents();addEventListener('storage', this.storage);},removeEvents(d) {removeEventListener('storage', this.storage);},storage(e) {e.key === 'language' && this.changeLanguage(e.newValue);// 监听手工修改localStorage.language;},}
};
</script> 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/34742.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在Eclipse在Java里面调用Python脚本的方法

由于项目中需要用到Java调用Python的脚本&#xff0c;来实现一些功能&#xff0c;就对jython做了一些了解&#xff0c;通过jython可以实现java对python脚本的调用。Java调用Python开发环境配置(EclipseJythonPyDev) 1、Jython是什么 Java可以使用Jython库来调用Python库。Jyt…

你不得不懂的IT知识-《敏捷项目管理》

国林哥在IBM时&#xff0c;几乎每天都会收到关于“敏捷”相关的邮件&#xff0c;公司鼓励我们去学习邮件里的知识&#xff0c;参加敏捷相关的认证和培训。刚开始我和大多数同事一样不管不顾&#xff0c;后来随着PBC里要求加上成长目标&#xff0c;比如要获得一个认证&#xff0…

React使用antd的图片预览组件,点击哪个图片就预览哪个的设置

使用了官方推荐的相册模式的预览&#xff0c;但是点击预览之后&#xff0c;每次都是从图片列表的第一张开始预览&#xff0c;而不是点击哪张就从哪张开始预览&#xff1a; 所以这里我就封装了一下&#xff0c;对初始化预览的列表进行了逻辑处理&#xff1a; 当点击开始预览的…

加载并绘制时间域内的心电图信号,并实施Q因子为1的陷波滤波器以去除50 Hz频率研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

一篇打通,pytest自动化测试框架详细,从0到1精通实战(一)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 pytest单元测试框…

redis学习笔记(七)

文章目录 zset&#xff08;有序集合&#xff09;&#xff08;1&#xff09;添加成员&#xff08;2&#xff09;获取score在指定区间的所有成员&#xff08;3&#xff09;获取集合长度&#xff08;4&#xff09;获取指定成员的权重值&#xff08;5&#xff09;获取指定成员在集合…

2308C++简单异步改造网络库

用简单异步可以轻松改造同步网络库从而获得大幅性能提升,用它改造异步回调网络库可以让我们以同步方式写代码,让代码更简洁,可读性更好,还能避免回调地狱的问题. 本文通过两个例子分别来介绍如何用简单异步改造基于asio的同步网络库和异步回调网络库. 示例依赖了独立版的asio(…

JavaWeb_总体介绍

文章目录 1.总括2.JavaWeb项目架构 1.总括 2.JavaWeb项目架构

request.post,json和data

参考 https://zhuanlan.zhihu.com/p/140372568 https://zhuanlan.zhihu.com/p/140372568 介绍 这两条请求语句使用了不同的参数传递方式&#xff0c;有以下区别&#xff1a;1. requests.post(urlhttp://xx.8.84.xx:8000/inference, jsondata)这个语句使用了 json 参数&#…

js设置css变量控制页面一行展示指定个数的元素

前置知识&#xff1a; CSS变量之var()函数的应用——动态修改样式 & root的使用 flex相关知识 场景&#xff1a; 动态设置给父元素内子元素设置每行排列几个 通过 document.body.style.setProperty(--itemNum, 5)设置样式变量&#xff0c;然后通过给父元素设置display: f…

RocketMQ发送消息失败:error CODE: 14 DESC: service not available now, maybe disk full

在执行业务时&#xff0c;发现MQ控制台没有查询到消息&#xff0c;在日志中发现消息发送失败&#xff0c;报错error CODE: 14 DESC: service not available now, maybe disk full 分析报错应该是磁盘空间不足&#xff0c;导致broker不能进行正常的消息存储刷盘&#xff0c;去查…

MySQL 窗口函数是什么,有这么好用

先看这段像天书一样的 SQL ,看着就头疼。 SELECTs1.name,s1.subject,s1.score,sub.avg_score AS average_score_per_subject,(SELECT COUNT(DISTINCT s2.score) 1 FROM scores s2 WHERE s2.score > s1.score) AS score_rank FROM scores s1 JOIN (SELECT subject, AVG(sco…

Android 13 MTK平台添加自定义按键,以及CTS问题解决

添加自定义按键流程 一般来说上层添加以下几处修改 驱动层的键值上报,让驱动处理好即可 frameworks / base/core/java/android/view/KeyEvent.java public static final int KEYCODE_DEMO_APP_4 = 304;/** add by songhui for fingerprint Key code */+ public static fina…

IntelliJ IDEA Bookmark使用

1 增加 右键行号栏 2 查看 从favorite这里查看 参考IntelliJ IDEA 小技巧&#xff1a;Bookmark(书签)的使用_bookmark idea 使用_大唐冠军侯的博客-CSDN博客

neo4j的CQL命令实例演示

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

07-2_Qt 5.9 C++开发指南_二进制文件读写(stm和dat格式)

文章目录 1. 实例功能概述2. Qt预定义编码文件的读写2.1 保存为stm文件2.2 stm文件格式2.3 读取stm文件 3. 标准编码文件的读写3.1 保存为dat文件3.2 dat文件格式3.3 读取dat文件 4. 框架及源码4.1 可视化UI设计4.2 mainwindow.cpp 1. 实例功能概述 除了文本文件之外&#xff…

pve和openwrt以及我的电脑中网络的关系和互通组网

情况1 一台主机 有4个口&#xff0c;分别eth0,eth1,eth2,eth3 pve有管理口 这个情况下 &#xff0c;没有openwrt 直接电脑和pve管理口连在一起就能进pve管理界面 情况2 假设pve 的管理口味eth0 openwrt中桥接的是eth0 eth1 eth2 那么电脑连接eth3或者pve管理口设置eth3&#xf…

【C#】设置有线网卡IP地址,子网掩码,网关,DNS

方法 public partial class ComputerInfo{/// <summary>/// 设置IP地址&#xff0c;子网掩码&#xff0c;网关&#xff0c;DNS/// </summary>public static List<NetworkAdapterInfo> SetIpAddressSubMaskDnsGeteway(string ipAddress, string subMask, stri…

MySQL库的操作

文章目录 MySQL库的操作1. 创建数据库2. 字符集和校验规则(1) 查看系统默认字符集以及校验规则(2) 查看数据库支持的字符集和校验规则(3) 案例(4) 校验规则对数据库的影响 3. 查看数据库4. 修改数据库5. 删除数据库6. 数据库的备份和恢复(1) 备份(2) 还原 7. 查看连接情况 MySQ…

在 Windows 中恢复数据的 5 种方法

发生数据丢失的原因有多种。无论是因为文件被意外删除、文件系统或操作系统损坏&#xff0c;还是由于软件或硬件级别的存储故障&#xff0c;数据都会在您最意想不到的时候丢失。今天我们重点介绍五种数据恢复方法&#xff0c;以应对意外情况的发生。 1.从另一台机器启动硬盘 如…