当前位置: 首页 > 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;合并…...

终极文档下载神器:一键下载30+平台文档的完整解决方案

终极文档下载神器&#xff1a;一键下载30平台文档的完整解决方案 【免费下载链接】kill-doc 看到经常有小伙伴们需要下载一些免费文档&#xff0c;但是相关网站浏览体验不好各种广告&#xff0c;各种登录验证&#xff0c;需要很多步骤才能下载文档&#xff0c;该脚本就是为了解…...

3分钟掌握音乐文件解密:NCM加密格式终极转换指南

3分钟掌握音乐文件解密&#xff1a;NCM加密格式终极转换指南 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 你是否曾在网易云音乐下载了心爱的歌曲&#xff0c;却发现只能在官方App中播放&#xff1f;那些神秘的NCM格式文件就像被锁…...

从校园到职场:技术新人必须完成的3个思维转变

从象牙塔迈入软件测试的真实战场&#xff0c;许多技术新人会感到一种强烈的“水土不服”。在学校里&#xff0c;你的目标是交出一份正确的作业或通过一场考试&#xff0c;评价体系清晰且单一。但在职场&#xff0c;测试工程师面对的是不完整的文档、随时变更的需求和“为什么上…...

构建AI模型API桥接器:实现OpenAI格式与私有模型服务的无缝对接

1. 项目概述&#xff1a;连接两个世界的桥梁最近在折腾一些AI相关的项目时&#xff0c;遇到了一个挺有意思的“桥接”需求。简单来说&#xff0c;我手头有一套基于OpenAI API的成熟应用逻辑&#xff0c;但出于性能、成本或者特定环境限制的考虑&#xff0c;我希望后端能无缝切换…...

如何快速解密RPG Maker加密文件:新手必看的完整解密指南

如何快速解密RPG Maker加密文件&#xff1a;新手必看的完整解密指南 【免费下载链接】RPGMakerDecrypter Tool for decrypting and extracting RPG Maker XP, VX and VX Ace encrypted archives and MV and MZ encrypted files. 项目地址: https://gitcode.com/gh_mirrors/rp…...

IT68353:双DP 1.4 + HDMI 2.0 转 HDMI 2.0 单芯片KVM切换方案

一、前言多主机协同办公、电竞直播、工控监控、视频会议等场景&#xff0c;对4K60Hz高画质切换、键鼠共享、Type-C一线通、多路信号兼容、极简外围的需求持续攀升。传统KVM方案普遍采用多芯片拼凑架构&#xff0c;需要DP切换芯片、HDMI切换芯片、USB Hub、PD控制器、外置MCU等多…...

基于Next.js 14与Sanity构建高性能个人博客:全栈技术栈解析与实践

1. 项目概述&#xff1a;一个现代、高性能的个人博客系统 最近在折腾个人博客&#xff0c;发现了一个非常亮眼的开源项目——CaliCastle/cali.so。这不仅仅是一个博客模板&#xff0c;更是一个集成了当前前端最佳实践的完整个人网站解决方案。原作者Cali&#xff08;Calvin&am…...

基于大语言模型的AI狼人杀游戏:双层角色扮演与模型竞技场设计

1. 项目概述&#xff1a;当狼人杀遇上AI&#xff0c;一场全新的推理盛宴毕业之后&#xff0c;想凑齐8到12个人&#xff0c;在周末的晚上围坐一圈&#xff0c;点上外卖&#xff0c;来一场酣畅淋漓的狼人杀&#xff0c;几乎成了一种奢望。这个游戏的精髓在于社交&#xff0c;但剥…...

深入解析Baichuan-7B:从GPT架构到LoRA微调的实践指南

1. 项目概述&#xff1a;从开源大模型到“百川”入海 最近在和朋友聊起国内大模型的开源生态时&#xff0c;总绕不开一个名字——“百川”。我说的不是地理上的河流&#xff0c;而是由百川智能公司开源的Baichuan系列大语言模型。今天想重点聊聊的&#xff0c;是它的起点&#…...

降AI率软件9平台覆盖测评:嘎嘎降自研稳定vs套壳工具单平台!

降AI率软件9平台覆盖测评&#xff1a;嘎嘎降自研稳定vs套壳工具单平台&#xff01; 「支持知网维普」实际只能稳定降一个平台&#xff0c;这是怎么回事&#xff1f; 我是双学位本科生&#xff0c;毕业论文 3.5 万字。学校规定送知网做 AIGC 检测&#xff0c;但导师建议我自己…...