一分钟上手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> 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

踩坑串口通信 serialPort.RtsEnable = true

背景&#xff1a; 最近在调试一个激光模块&#xff0c;使用的是422通信&#xff0c;然后买了一个485转422的转换器。 通过串口监控软件观察&#xff0c;明明和串口助手发的东西一模一样&#xff0c;但是就是不返回&#xff01; 解决方案&#xff1a; 我加了&#xff0c;这句&…

Java课题笔记~ 日期处理

2.8 日期处理 2.8.1 日期注入 日期类型不能自动注入到方法的参数中。需要单独做转换处理。 使用DateTimeFormat注解&#xff0c;需要在springmvc.xml文件中添加mvc:annotation-driven/标签。 &#xff08;1&#xff09;在方法的参数上使用DateTimeFormat注解 RequestMappi…

【mysql】—— 表的增删改查

目录 序言 &#xff08;一&#xff09;Create操作 1、单行数据 全列插入 2、多行数据 指定列插入 3、插入否则更新 4、直接替换 &#xff08;二&#xff09;Retrieve操作 1、SELECT 列 1️⃣全列查询 2️⃣指定列查询 3️⃣查询字段为表达式 4️⃣为查询结果指定…

机器学习基础笔记

文章目录 1.机器学习简介1.1 机器学习的一般功能1.2 机器学习的应用1.3 机器学习的方法1.4 机器学习的种类1.5 机器学习的常用框架 2. Spark机器学习2.1 MLlib介绍2.2 MLlib的数据格式2.2.1 本地向量2.2.2 标签数据 2.3 MLlib与ml2.4 MLlib的应用场景 3.Spark环境搭建4.向量与矩…

【C语言】回调函数,qsort排序函数的使用和自己实现,超详解

文章目录 前言一、回调函数是什么二、回调函数的使用1.使用标准库中的qsort函数2.利用qsort函数对结构体数组进行排序 三、实现qsort函数总结 先记录一下访问量突破2000啦&#xff0c;谢谢大家支持&#xff01;&#xff01;&#xff01; 这里是上期指针进阶链接&#xff0c;方便…

Python入门【TCP建立连接的三次握手、 TCP断开连接的四次挥手、套接字编程实战、 TCP编程的实现、TCP双向持续通信】(二十七)

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱敲代码的小王&#xff0c;CSDN博客博主,Python小白 &#x1f4d5;系列专栏&#xff1a;python入门到实战、Python爬虫开发、Python办公自动化、Python数据分析、Python前后端开发 &#x1f4e7;如果文章知识点有错误…

KMPBC:KMP算法及其改进(kmp with bad character)

前言 最近在看字符串匹配算法&#xff0c;突然灵光一闪有了想法&#xff0c;可以把kmp算法时间效率提高&#xff0c;同时保持最坏时间复杂度O(nm)不变。其中n为主串长度&#xff0c;m为模式串长度&#xff0c;经测试可以块3-10倍&#xff0c;以为发现了新大陆&#xff0c;但是…

内网ip与外网ip

一、关于IP地址 我们平时直接接触最多的是内网IP。而且还可以自己手动修改ip地址。而外网ip&#xff0c;我们很少直接接触&#xff0c;都是间接接触、因为外网ip一般都是运营商管理&#xff0c;而且是全球唯一的&#xff0c;一般我们自己是无法修改的。 内网IP和外网IP是指在…

【2024】MySQL中常用函数和窗口函数的基本使用方式

MySQL中常用函数和窗口函数的基本使用方式 一、基础函数1、聚合函数&#xff1a;2、字符串函数&#xff1a;3、日期和时间函数4、数值函数5、条件函数 二、窗口函数(*OVER*) 一、基础函数 1、聚合函数&#xff1a; SELECT COUNT(*) FROM table_name;&#xff1a;计算表中的行…

Effective C++学习笔记(8)

目录 条款49&#xff1a;了解new-handler的行为条款50&#xff1a;了解new和delete的合理替换时机条款51&#xff1a;编写new和delete时需固守常规条款52&#xff1a;写了placement new也要写placement delete条款53&#xff1a;不要轻忽编译器的警告条款54&#xff1a;让自己熟…

Spring Boot 中的 AOP,到底是 JDK 动态代理还是 Cglib 动态代理

大家都知道&#xff0c;AOP 底层是动态代理&#xff0c;而 Java 中的动态代理有两种实现方式&#xff1a; 基于 JDK 的动态代理 基于 Cglib 的动态代理 这两者最大的区别在于基于 JDK 的动态代理需要被代理的对象有接口&#xff0c;而基于 Cglib 的动态代理并不需要被代理对…

PyTorch训练简单的生成对抗网络GAN

文章目录 原理代码结果参考 原理 同时训练两个网络&#xff1a;辨别器Discriminator 和 生成器Generator Generator是 造假者&#xff0c;用来生成假数据。 Discriminator 是警察&#xff0c;尽可能的分辨出来哪些是造假的&#xff0c;哪些是真实的数据。 目的&#xff1a;使…

C++中List的实现

前言 数据结构中&#xff0c;我们了解到了链表&#xff0c;但是我们使用时需要自己去实现链表才能用&#xff0c;但是C出现了list将这一切皆变为现。list可以看作是一个带头双向循环的链表结构&#xff0c;并且可以在任意的正确范围内进行增删查改数据的容器。list容器一样也是…

【CSS】CSS 布局——常规流布局

<h1>基础文档流</h1><p>我是一个基本的块级元素。我的相邻块级元素在我的下方另起一行。</p><p>默认情况下&#xff0c;我们会占据父元素 100%的宽度&#xff0c;并且我们的高度与我们的子元素内容一样高。我们的总宽度和高度是我们的内容 内边距…

如何发布自己的小程序

小程序的基础内容组件 text&#xff1a; 文本支持长按选中的效果 <text selectable>151535313511</text> rich-text: 把HTML字符串渲染为对应的UI <rich-text nodes"<h1 stylecolor:red;>123</h1>"></rich-text> 小程序的…

2023牛客暑期多校训练营8-C Clamped Sequence II

2023牛客暑期多校训练营8-C Clamped Sequence II https://ac.nowcoder.com/acm/contest/57362/C 文章目录 2023牛客暑期多校训练营8-C Clamped Sequence II题意解题思路代码 题意 解题思路 先考虑不加紧密度的情况&#xff0c;要支持单点修改&#xff0c;整体查询&#xff0…

AUTOSAR NvM Block的三种类型

Native NVRAM block Native block是最基础的NvM Block&#xff0c;可以用来存储一个数据&#xff0c;可以配置长度、CRC等。 Redundant NVRAM block Redundant block就是在Native block的基础上再加一个冗余块&#xff0c;当Native block失效&#xff08;读取失败或CRC校验失…

时序预测 | MATLAB实现基于BiLSTM双向长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于BiLSTM双向长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于BiLSTM双向长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍 Matlab实现BiLST…

2022年09月 C/C++(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;统计误差范围内的数 统计一个整数序列中与指定数字m误差范围小于等于X的数的个数。 时间限制&#xff1a;5000 内存限制&#xff1a;65536 输入 输入包含三行&#xff1a; 第一行为N&#xff0c;表示整数序列的长度(N < 100); 第二行为N个整数&#xff0c;…

把握数据要素,做数字化时代的弄潮儿

截至2022年6月&#xff0c;我国网民规模已经达到了10.51亿&#xff0c;人均上网时间达到了每周29.5个小时&#xff0c;并且这部分人群使用手机上网的比例为99.6%。如果把工作、睡眠以及其他的必要的时间算上的话&#xff0c;可以发现通过手机上网已经成为了人们日常中的一部分。…