vue简体繁体互转无需做字库

第一种方法

  • vue-i18n 需要自己写字库库很麻烦,而且不支持后端传值

第二种

  • opencc 这个库前端去使用的时候 数据较多的情况非常慢.影响使用

第三种 language-hk-loader

  • npm i language-hk-loader 从其他博客中看到的一种,很方便不需要写字库,但是在打包的时候去整体的去翻译了,无法做到手动点击去简体和繁体切换

language-hk-loader 动态点击切换思路

一. 打成两个包,点击切换的时候根据一个变量去切换路由,一个包使用插件 一个包正常简体
二. 第二种 打一个包 使用exclude 排除不需要使用翻译的文件,但是会每个页面都复制了一份,小项目无所谓

  1. 打包配置不需要的文件
        {test: /\.(js|vue)$/,loader: 'language-hk-loader',//不需要文件夹exclude: [/schome/, /scloan/, /scquery/, /scTemplate/],},
  1. router配置
[
//这个时繁体路由{path: '/home',name: 'Home',component: () =>import(/* webpackChunkName: "home" */ '@/views/home/index.vue')},//简体路由{path: '/sc/home',name: 'scHome',component: () =>import(/* webpackChunkName: "schome" */ '@/views/sc/schome/index.vue')},
]
  1. 路由拦截

// 点击切换按钮的时候在本地存储了一个变量,然后每次根据这个变量去判断是跳转繁体路由还是简体路由

router.beforeEach((to, from, next) => {const path = localStorage.getItem('textType') ? localStorage.getItem('textType') : ''if (!to.path.includes('/sc') && path) {next(`${path}${to.path}`)} else {if (to.path.includes('/sc') && !path) {let str = to.pathconsole.log(str)const arr = str.split('/sc')return next(arr[1])}next()}
})
  1. 点击切换
    //本地变量空值代表繁体,有值代表繁体,看个人爱好
    if (this.text === '繁') {localStorage.setItem('textType', '')this.text = '简'} else {localStorage.setItem('textType', '/sc')this.text = '繁'}this.$router.go(0)

效果展示

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

VG7050EAN 可编程压控晶体振荡器 (VCXO) 输出:LV-PECL

可编程电压控制振荡器: VG7050EAN是一个低抖动可编程的VCXO在任何频率。VG7050EAN由VCXO、PLL和LVPECL的输出缓冲区组成。它的输出频率可编程从50 MHz到800 MHz,分辨率接近2 ppb。VCXO为PLL提供稳定的参考时钟。VCXO的Kv可以通过I进行编程2C接口。PLL由低…

【解决---module ‘labelme.utils‘ has no attribute ‘draw_label‘--制作自己的车道线数据集】

项目场景: 在使用labelme进行数据标注时,需要进行labelme_json_to_dataset,以此来进行数据格式的转换,然而在运行 : python json2dataset.py /home/l/label_line/save_vedio_frame/label_2 报错了!&#…

LaTex的下载与安装(Texlive+TexStudio,2023版)

目录 1. Texlive的下载与安装2. TexStudio的下载与安装 LaTex的下载与安装涉及到环境配置和编辑器安装,本文主要根据一下两个较为常用的组合进行下载和安装: Texlive(是必须安装的LaTex环境);TexStudio(是…

jenkins 自由风格部署vue项目,参数化构建vue项目

1. 丢弃旧的构建 2. 是否需要install 3. git 4. 配置node16: 5. 脚本: 脚本: #进入Jenkins工作空间下项目目录 cd /var/lib/jenkins/workspace/你的任务名称 node -v #检测node版本(此条命令非必要) npm -v #检测npm版本&#x…

Move 向未来,2024 开发者大会热潮涌动

1 月 13 日至 14 日,「2024 Move 开发者大会:Move 生态关键的一年」将于上海举办。本次大会由 MoveFuns 、OpenBuild 和 MoveBit 主办,Rooch、AptosGlobal、alcove、zkMove、TinTinLand 和云赛空间协办,并得到 Aptos、Sui 和亚马逊…

花为缘积萨伯爵名表工艺之美,传承卓越

腕表是时间的载体,也是品味的象征。在现代人眼中,它们不仅仅是时间的工具,更是一种艺术形式。在制表工艺的殿堂中,花为缘积萨伯爵名表以其独特的创造力和严谨缜密的要求,创作了一系列典范之作,将技术与美学…

【APP抓包】IOS应用抓包防护绕过实战教程

文章目录 1. 写在前面2. 测试机越狱2.1. 爱思助手2.2. checkra1n 3. 代理抓包3.1. 安装CA证书 4. 客户端证书绑定绕过4.1. SSLKillSwitch4.2. Objection 5. 双向证书绑定绕过5.1. 绕过服务端 6. 越狱检测绕过6.1. Liberty Lite绕过检测6.2. Hestia绕过检测6.3. HideJB绕过检测6…

毛概笔记。

一、 毛泽东思想是马中化的第一果,是关于搞革命,搞改造,搞建设的理论。 二、新民主主义革命 新民主主义革命的三大法宝:1.统一战线 2. 武装斗争 3.党的建设 政治纲领 经济纲领 文化纲领 乱世造英雄 三、社会主义改造理论&#xff…

Vue3-43-组件- 组件状态保持 KeepAlive 的简单使用

作用说明 一个应用场景 &#xff1a; 当我们在进行路由跳转的时候&#xff0c;会用到 <router-view> 来作为 组件渲染的出口&#xff0c; 此时&#xff0c;组件的状态是不会被保持的。 比如 &#xff1a; 当前在【组件A】中有一个响应式状态 num 的值通过 自加的方式 从初…

猫长期吃猫粮好吗?主食冻干猫粮那种好吃又健康

许多铲屎官可能认为&#xff0c;只需给猫咪喂食猫粮就足够了。然而&#xff0c;猫咪实际上是肉食动物&#xff0c;对蛋白质的需求非常高。冻干猫粮采用低温真空干燥处理技术&#xff0c;将鲜肉经过预冻、升华、解析三个过程&#xff0c;去除水分的同时保持蛋白质等营养物质不变…

弹窗找不到iutils.dll是怎么回事?需要怎么解决呢?分享多种方法

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“iutils.dll丢失”。iutils.dll是一款系统的动态链接库文件&#xff0c;主要用于支持某些软件和游戏的启动和运行。如果开机提示iutils.dll丢失&#xff0c;可能会导致相关软件和游戏无法正…

JSP期末考试复习习题及答案

一、选择题1 下面哪个是JSP指令标记&#xff08;C&#xff09; A、<% %> B、<%! %> C、<% %> D、<% %> JavaBean的生命周期中&#xff0c;哪个是用来跟踪用户会话的&#xff08;B&#xff09; A、session B、request C、page D、application http是一…

校园跑腿小程序(前后端已完成)可做项目,可当毕设,支持二创

此小程序为我单独在小程序上运行的结果&#xff0c;图片信息、列表信息等没有出现是因为服务器到期了&#xff0c;资源被释放了&#xff0c;无法显示。但是后端是已经实现了的&#xff0c;有兴趣的同学可以私聊我。 效果预览

Qt5+VS2013兼容XP方法

用Qt5VS2013编译程序默认配置会在XP运行时报"不是有效的Win32程序" 工作需要必须要XP运行 pro文件中加一句: QMAKE_LFLAGS_WINDOWS /SUBSYSTEM:WINDOWS,5.01 ------------------------------------------------------- qtbase\mkspecs\common\msvc-desktop.conf …

@NotBlank、@Length、@Range详细讲解

NotBlank、Length 和 Range 是常用的 Java 注解&#xff0c;用于对方法参数或属性进行验证和限制。下面是对它们的详细讲解&#xff1a; 1.NotBlank&#xff1a;这个注解用于验证字符串类型的参数或属性&#xff0c;确保它们不为空且至少包含一个非空格字符。它是 javax.valid…

建筑模板每平方价格怎么算?

在建筑行业中&#xff0c;建筑模板是一种常用的辅助材料&#xff0c;主要用于浇筑混凝土时形成所需的结构形状。了解建筑模板的定价方式对于预算控制和成本估算至关重要。本文将详细介绍建筑模板每平方米价格的计算方法。 1. 建筑模板的类型和特点建筑模板的种类繁多&#xff0…

Linux ls命令

目录 一. 配置项1.1 ls -l1.2 ls -a1.3 ls -lrt1.4 ls -ld .?* 二. 案例2.1 查看指定文件夹下文件的数量2.2 查看多个文件夹下文件信息 一. 配置项 1.1 ls -l ⏹ ls 列出当前文件夹下所有文件名称(不包含隐藏文件) jmw_num_00 jmw_num_02 jmw_num_04 jmw_num_06 jmw_n…

CV之DL之Yolo:计算机视觉领域算法总结—Yolo系列(YoloV1~YoloV8各种对比)的简介、安装、案例应用之详细攻略

CV之DL之Yolo&#xff1a;计算机视觉领域算法总结—Yolo系列(YoloV1~YoloV8各种对比)的简介、安装、案例应用之详细攻略 导读&#xff1a;近期&#xff0c;博主应太多太多的网友的私信&#xff0c;要求让博主总结一下目标检测领域算法的发展历史和最新算法的技术架构&#xff0…

try catch 应该在 for 循环里面还是外面

正文 首先 &#xff0c; 话说在前头&#xff0c; 没有什么 在里面 好 和在外面好 或者 不好的 一说。 本篇文章内容&#xff1a; 使用场景 性能分析 个人看法 1. 使用场景 为什么要把 使用场景 摆在第一个 &#xff1f; 因为本身try catch 放在 for循环 外面 和里面 …

ffmpeg api-codec-param-test.c源码讲解

try_decode_video_frame /*** 尝试解码视频帧** param codec_ctx 解码器上下文* param pkt 待解码的视频数据包* param decode 是否解码标志&#xff0c;如果为1&#xff0c;则进行解码&#xff0c;如果为0&#xff0c;则不解码* return 返回0表示成功&#xff0c;否则表示出错…