当前位置: 首页 > news >正文

i18n 配置vue项目中英文语言包(中英文转化)

一、实现效果

二、下载插件创建文件夹

2.1 下载cookie来存储

npm install --save js-cookienpm i vue-i18n -S

2.2 封装组件多页面应用

2.3 创建配置语言包字段

 三、示例代码

 3.1 main.js 引用 i18n.js

import i18n from './lang'// 实现语言切换:i18n处理element,根据locale属性去寻找显示内容
Vue.use(Element, {i18n: (key, value) => i18n.t(key, value),
})new Vue({i18n,render: (h) => h(App),
})

 3.2 封装组件:src\components\LangSelect\index.vue

<template><el-dropdown trigger="click" @command="handleSetLanguage"><div><div class="lang_img"><img src="@/assets/ch-en.png" alt="语言切换" title="语言切换" /></div></div><el-dropdown-menu slot="dropdown"><el-dropdown-item command="zh" :disabled="'zh' === $i18n.locale">中文</el-dropdown-item><el-dropdown-item command="en" :disabled="'en' === $i18n.locale">English</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>import Cookies from 'js-cookie'export default {methods: {// 中英文语言切换handleSetLanguage(lang) {Cookies.set('language', lang) // 切换多语言this.$i18n.locale = lang // 设置给本地的i18n插件this.$message({message: this.$t('public.switch'),type: 'success',})},},}
</script>
<style lang="scss" scoped>.lang_img {margin-right: 10px;cursor: pointer;img {width: 25px;height: 25px;}}
</style>

3.3 导入配置的字段:src\lang\index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui lang
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import zhLocale from './zh'
import enLocale from './en'Vue.use(VueI18n)export default new VueI18n({locale: Cookies.get('language') || 'zh', // 从cookie缓存中获取语言类型 获取不到就是中文messages: {en: {...enLocale, // 引入英文语言包...elementEnLocale, // 引入自定义的语言包},zh: {...zhLocale, // 引入中文语言包...elementZhLocale,},},
})

3.4 中文字段:src\lang\zh.js

export default {index: '首页',helpmenu: '帮助', public: {MoreActions: '更多操作',CloseAll: '关闭所有',switch: '切换语言成功',},
}

3.5 英文字段:src\lang\en.js

export default {index: 'Home',helpmenu: 'Help Menu', public: {MoreActions: 'More Actions ', CloseAll: 'Close All',switch: 'Successfully Switched Language',},
}

zh.js和en.js中的变量名称要对应起来

四、使用语言包功能

4.1 页面使用组件

<template><div><LangSelect /> // 使用</div>
</template><script>import LangSelect from '@/components/LangSelect'  // 导入export default { components: {   // 注册LangSelect, },}
</script>

 4.2 替换页面中的字段

1、{{$t('index')}}2、:placeholder="$t('public.switch')"3、:label="$t('public.switch')"4、message: this.$t('public.switch'),

相关文章:

i18n 配置vue项目中英文语言包(中英文转化)

一、实现效果 二、下载插件创建文件夹 2.1 下载cookie来存储 npm install --save js-cookienpm i vue-i18n -S 2.2 封装组件多页面应用 2.3 创建配置语言包字段 三、示例代码 3.1 main.js 引用 i18n.js import i18n from ./lang// 实现语言切换:i18n处理element&#xff0c…...

NFTScan NFT API 在 DID Protocol 开发中的应用

自互联网发展以来&#xff0c;Web2.0 时代产生了网络社会&#xff0c;社会已经不再局限于地理边界&#xff0c;而 Web 3.0 引入了去中心化的理念&#xff0c;强调个体数据隐私和可信互操作性。在这个新的时代中&#xff0c;去中心化身份&#xff08;Decentralized Identifier 即…...

内存管理(1)

内存管理&#xff08;1&#xff09; 1、各类型数据在内存中的存储空间2、C内存管理方式2.1 针对于内置类型分析2.2 针对于自定义类型分析2.3 C语言与C在申请动态内存失败时的区别 3、operator new 和 operator delete函数&#xff08;重点&#xff09;3.1 底层知识解析3.2 实现…...

实践教程|基于 pytorch 实现模型剪枝

PyTorch剪枝方法详解&#xff0c;附详细代码。 一&#xff0c;剪枝分类 1.1&#xff0c;非结构化剪枝 1.2&#xff0c;结构化剪枝 1.3&#xff0c;本地与全局修剪 二&#xff0c;PyTorch 的剪枝 2.1&#xff0c;pytorch 剪枝工作原理 2.2&#xff0c;局部剪枝 2.3&#…...

[Docker精进篇] Docker镜像构建和实践 (三)

前言&#xff1a; Docker镜像构建的作用是将应用程序及其依赖打包到一个可移植、自包含的镜像中&#xff0c;以便在不同环境中快速、可靠地部署和运行应用程序。 文章目录 Docker镜像构建1️⃣是什么&#xff1f;2️⃣为什么&#xff1f;3️⃣镜像构建一、用现有容器构建新镜像…...

【Unity细节】Unity中的层级LayerMask

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 &#x1f636;‍&#x1f32b;️收录于专栏&#xff1a;unity细节和bug &#x1f636;‍&#x1f32b;️优质专栏 ⭐【…...

修改el-table行悬停状态的背景颜色

.content:deep().el-table tr:hover>td {background-color: #f5f5f5 !important; /* 设置悬停时的背景颜色 */ }/*这一点很重要&#xff0c;否则可能会导致hover行时操作列还是原来的背景色*/ .content:deep().el-table__body tr.hover-row>td{background-color: #f5f5f5…...

记一次mysql not in的使用问题

现象&#xff1a;使用not in 某个id集合&#xff0c;出现脏数据&#xff0c;存在null数据。例如&#xff1a;not in(1,2,null)&#xff0c;结果会一条数据都没有&#xff0c;为空 原因&#xff1a; 当使用NOT IN操作符时&#xff0c;传递给它的值列表中不能包含NULL值&#xf…...

JavaFx基础学习【四】:UI控件的通用属性

目录 前言 一、介绍 二、继承关系 三、常用通用属性 四、属性Properties 五、属性绑定 六、属性监听 七、事件驱动 八、其他章节 前言 如果你还没有看过前面的文章&#xff0c;可以通过以下链接快速前往学习&#xff1a; JavaFx基础学习【一】&#xff1a;基本认识_明…...

【Leetcode】101.对称二叉树

一、题目 1、题目描述 给你一个二叉树的根节点 root , 检查它是否轴对称。 示例1: 输入:root = [1,2,2,3,4,4,3] 输出:true示例2: 输入:root = [1,2,2,null,3,null,3] 输出:false提示: 树中节点数目在范围 [1, 1000] 内-100 <= Node.val <= 100进阶:你可以…...

用Java实现原神抽卡算法

哈喽~大家好&#xff0c;好久没有更新了&#xff0c;也确实遇到了很多事&#xff0c;这篇开始恢复更新&#xff0c;喜欢的话&#xff0c;可以给个的三连&#xff0c;什么&#xff1f;你要白嫖&#xff1f;那可以给个免费的赞麻。 &#x1f947;个人主页&#xff1a;个人主页​​…...

微服务—Eureka注册中心

eureka相当于是一个公司的管理人事HR,各部门之间如果有合作时&#xff0c;由HR进行人员的分配以及调度&#xff0c;具体选哪个人&#xff0c;全凭HR的心情&#xff0c;如果你这个部门存在没有意义&#xff0c;直接把你这个部门撤销&#xff0c;全体人员裁掉&#xff0c;所以不想…...

AI问答:JSBridge / WebView 与 Native 通信

一、理解JSBridge JSBridge是一种连接JavaScript和Native代码的桥梁&#xff0c;它提供了一种方法&#xff0c;使得JavaScript可以直接调用Native的代码&#xff0c;同时使得Native的代码也能直接调用JavaScript的方法&#xff0c;从而实现了JavaScript和Native之间的相互调用和…...

Mybatis动态SQL,标签大全

动态SQL常用场景 批量删除delete from t_car where id in(1,2,3,4,5,6,......这里的值是动态的&#xff0c;根据用户选择的 id不同&#xff0c;值是不同的);多条件查询哪些字段会作为查询条件是不确定的&#xff0c;根据用户而定 select * from 1 t_car where brand like 丰田…...

zotero在不同系统的安装(win/linux)

1 window系统安装 zotero 官网&#xff1a; https://www.zotero.org/ 官方文档 &#xff1a;https://www.zotero.org/support/ (官方)推荐常用的插件: https://www.zotero.org/support/plugins 入门视频推荐&#xff1a; Zotero 文献管理与知识整理最佳实践 点击 exe文件自…...

web会话跟踪以及JWT响应拦截机制

目录 JWT 会话跟踪 token 响应拦截器 http是无状态的&#xff0c;登录成功后&#xff0c;客户端就与服务器断开连接&#xff0c;之后再向后端发送请求时&#xff0c;后端需要知道前端是哪个用户在进行操作。 JWT Json web token (JWT), 是为了在网络应用环境间传递声明而…...

Web菜鸟入门教程 - Swagger实现自动生成文档

如果是一个人把啥都开发了&#xff0c;那用不到Swagger-UI&#xff0c;但一般情况是前后端分离的&#xff0c;所以就需要告诉前端开发人员都有哪些接口&#xff0c;传入什么参数&#xff0c;怎么调用&#xff0c;返回什么。有了Swagger-UI就能把这部分文档编写的业务给省去了。…...

2023国赛数学建模思路 - 复盘:校园消费行为分析

文章目录 0 赛题思路1 赛题背景2 分析目标3 数据说明4 数据预处理5 数据分析5.1 食堂就餐行为分析5.2 学生消费行为分析 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 赛题背景 校园一卡通是集…...

第7章:贝叶斯分类器

贝叶斯决策论 贝叶斯分类器&#xff1a;使用贝叶斯公式 贝叶斯学习&#xff1a;使用分布估计&#xff08;不同于频率主义的点估计&#xff09; 极大似然估计 朴素贝叶斯分类 半朴素贝叶斯 条件独立性假设&#xff0c;在现实生活中往往很难成立。 半朴素贝叶 斯的一个常用策略…...

【LeetCode】88.合并两个有序数组

题目 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&#xff0c;合并…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...