一分钟上手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单元测试框…

JavaWeb_总体介绍

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

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;去查…

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…

MySQL库的操作

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

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

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

分享一组天气组件

先看效果&#xff1a; CSS部分代码&#xff08;查看更多&#xff09;&#xff1a; <style>:root {--bg-color: #E9F5FA;--day-text-color: #4DB0D3;/* 多云 */--cloudy-background: #4DB0D3;--cloudy-temperature: #E6DF95;--cloudy-content: #D3EBF4;/* 晴 */--sunny-b…

Https、CA证书、数字签名

Https Http协议 Http协议是目前应用比较多应用层协议&#xff0c;浏览器对于Http协议已经实现。Http协议基本的构成部分有 请求行 &#xff1a; 请求报文的第一行请求头 &#xff1a; 从第二行开始为请求头内容的开始部分。每一个请求头都是由K-V键值对组成。请求体&#xf…

【C++入门到精通】C++入门 —— vector (STL)

阅读导航 前言一、vector简介1. 概念2. 特点 二、vector的使用1.vector 构造函数2. vector 空间增长问题⭕resize 和 reserve 函数 3. vector 增删查改⭕operator[] 函数 三、迭代器失效温馨提示 前言 前面我们讲了C语言的基础知识&#xff0c;也了解了一些数据结构&#xff0…

软件测试基础篇——Docker

1、docker技术概述 docker描述&#xff1a;docker是一项虚拟化的容器技术&#xff08;类似于虚拟机&#xff09;&#xff0c;docker技术给使用者提供一个平台&#xff0c;在该平台上可以利用提供的容器&#xff0c;对每一个应用程序进行单独的封装隔离&#xff0c;每一个应用程…

计算机竞赛 opencv python 深度学习垃圾图像分类系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; opencv python 深度学习垃圾分类系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 这是一个较为新颖的竞…

Monkey测试真的靠谱吗?

Monkey测试&#xff0c;顾名思义&#xff0c;就是模拟一只猴子在键盘上乱敲&#xff0c;从而达到测试被测系统的稳定性。Monkey测试&#xff0c;是Android自动化测试的一种手段&#xff0c;Monkey测试本身非常简单&#xff0c;Android SDK 工具支持adb Shell命令&#xff0c;实…