批量处理vue2中文硬编码转i18n国际化(保姆级)

news2024/11/22 15:39:26

文章目录

    • 背景
    • 技术选型
    • 使用软件与插件
    • 插件使用
    • 补充

背景

公司的项目需要适应国际化的需求,但是因为代码是一个成品的项目,也就导致,代码量巨大,连带着需要转国际化的硬编码中文也很多,如果一点点纯手工改动,会很呆,不仅费时费力,而且因为参与的人多,而国际化的文件就那两个,改起来疯狂冲突,所以批量处理刻不容缓。

技术选型

此处我找了网上的很多攻略,但是大多都是只讲一半,剩下的全靠自己摸索,也就导致需要这里找一点哪里找一点。而且并非一个成体系的,有一些甚至还需要使用百度翻译的api接口,最重要的是那个玩意有数量限制,而且还需要营业执照什么的,太麻烦了,因此就干脆放弃了那个。
关于i18n的配置还请自行查找文章进行配置

使用软件与插件

此处使用的软件为vscode,插件为i18n-ally与du-i18n

插件使用

打开项目的vscode之后在插件里面搜索i18n ally 如下图所示的框选的安装即可
在这里插入图片描述
i18n-ally配置文件位置如下图所示(一般在项目的最上面,第一个或者第二个就是这个文件夹)
需要注意的是这个配置文件只有在安装之后才会出现,一定要先安装插件
在这里插入图片描述
在这里插入图片描述
默认会有i18n-ally默认的配置文件
此处需要修改的有i18n-ally.localesPaths文件路径修改成自己的文件存放位置
其他的基本不用改,因为大部分都是中文翻译成英文

{
    "i18n-ally.localesPaths": ["src/i18n/lang"],
    "i18n-ally.sourceLanguage": "zh",
    "i18n-ally.displayLanguage": "zh-CN",
    "i18n-ally.keystyle": "nested",
    "i18n-ally.sortKeys": true,
    "i18n-ally.namespace": true,
    "i18n-ally.enabledParsers": ["json"],
    "i18n-ally.enabledFrameworks": ["vue"],
  
}

第二个需要下载的插件为du i18n
在这里插入图片描述
安装之后随便找个文件打开,右键选择国际化,选择设置,如下图所示

在这里插入图片描述
他会自己打开一个文件
在这里插入图片描述
需要重点修改的有tempFileName属性值,这个值为生成的国际化所在的文件名称,如果不设置名称的话,他会每个文件都创建一个文件,如果起了名字的话,他会把所有的国际化都写入一个文件,这样就省去了来回扒文件的问题。
其他的地方根据自己的情况酌情修改,其他的属性本文不涉及,也就不再提及,有兴趣的可以自行查找
下图为i18n的文件结构
在这里插入图片描述
需要注意的是语言存放必须位json,不能为js或者ts等,如果为其他的文件需要转换成json格式
如果存在js或者ts的话,使用下面的链接进行转移成json
https://uutool.cn/obj2json/#google_vignette
到这里基本上准备环节就结束了

剩下的就是操作了

随便打开一个文件,右键国际化,选择批量扫描中文
在这里插入图片描述
此时打开的是文件夹选择器,此时切记翻译的时候不要把i18n囊括进去,尤其是在已经翻译过一部分的情况下,直接使用会连带着原本已经翻译好的也给翻译了,这样就得不偿失了。
在这里插入图片描述
此时我们可以选择views等文件进行翻译,如果文件数量庞大的话,可能会比较慢,还请耐心等候,不要因为没反应就直接关闭
等到执行完成之后会在i18n下面多出来一个文件,文件名称为你在上面自己修改的名称
在这里插入图片描述
我的是test.json
在这里插入图片描述
此时就可以看到生成的文件了,但是会有一个问题他会确实英文部分,但是不要紧,我们把zh里面的中文部分复制到中文所对应的文件夹内。
等到复制完成,点击左侧如下图所示的图标,会看到有个叫翻译进度的东西

在这里插入图片描述
需要注意的是,此软件只能把中文翻译成其他语言,不支持翻译回中文
正常的话,en这个区域缺失的文案数量应该等于你新复制到中文文件内的国际化数量
点击对应的地球图标,会有个提示,点击确定即可
在这里插入图片描述
如果存在翻译报错超时的情况,可以使用steam++加速器进行加速
此加速器是免费的,我勾选了所有的服务,具体是那个我也不确认,在使用的时候也可以勾选所有的加速即可
在这里插入图片描述
需要注意的是,我尝试的是一次性翻译五千条是没问题的,九千条就会出现不执行的情况,还请注意一下。

补充

因为du i18n生成的时候会有一定情况的缺失,尤其是括号可能会出现不翻译的情况,此时可以使用翻译捡漏功能生成确实的部分,然后手动添加,毕竟工具也不是万能的,如果大佬有解决方案,也欢迎讨论。
在这里插入图片描述
插件存在一定的插入错误的问题,就是多代码里使用里单引号,因为它使用的也是单引号,存在把一些按钮转换成文字展示的情况,特殊情况需要自行排查解决了,但是大部分的问题都可已解决。

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

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

相关文章

RelationGraph实现工单进度图——js技能提升

直接上图: 从上图中可以看到整个工单的进度是从【开始】指向【PCB判责】【完善客诉】【PCBA列表】,同时【完善客诉】又可以同时指向【PCB判责】【PCBA列表】,后续各自指向自己的进度。 直接上代码: 1.安装 1.1 Npm 方式 npm …

“探索端智能,加速大模型应用” 火山引擎边缘智能x扣子技术沙龙圆满落幕!

9月21日,火山引擎边缘智能扣子技术沙龙在上海圆满落地,沙龙以“探索端智能,加速大模型应用”为主题,边缘智能、扣子、地瓜机器人以及上海交通大学等多位重磅嘉宾出席,从多维视角探讨 AI、 AIoT、端侧大模型等技术与发展…

嵌入式数据结构中线性表的具体实现

大家好,今天主要给大家分享一下,如何使用数据结构中的线性表以及具体的实现。 第一:线性表的定义和表示方法 线性表的定义 – 线性表就是零个或多个相同数据元素的有限序列。 • 线性表的表示方法 – 线性表记为: L=(a0,∙∙∙∙∙∙∙∙ai-1aiai+1 ∙∙∙∙∙∙an-1) •…

HTTP的工作原理

HTTP(Hypertext Transfer Protocol)是一种用于在计算机网络上传输超文本数据的应用层协议。它是构成万维网的基础之一,被广泛用于万维网上的数据通信。(超文本(Hypertext)是用超链接的方法,将各种不同空间的文字信息组…

数据交换的金钟罩:合理利用安全数据交换系统,确保信息安全

政府单位为了保护网络不受外部威胁和内部误操作的影响,通常会进行网络隔离,隔离成内网和外网。安全数据交换系统是专门设计用于在不同的网络环境(如内部不同网络,内部网络和外部网络)之间安全传输数据的解决方案。 使用…

Redis 其他类型 渐进式遍历

我们之前已经学过了Redis最常用的五个类型了,然而Redis还有一些在特定场景下比较好用的类型 Redis最关键的五个数据类型: 上面的类型是非常常用,很重要的类型。 除此之外的其他类型不常用,只是在特定的场景能够发挥用处&#…

澳鹏干货 | 大语言模型的上下文窗口 (Context Windows)

大语言模型(LLMs)极大地提升了人工智能在理解和生成文本方面的能力。其中一个影响其效用的重要方面是“上下文窗口”(Context Windows)—— 这个概念直接影响着模型接收和生成语言的有效性。 本期澳鹏干货将深入探讨上下文窗口对…

微软确认Word离奇Bug 命名不当会导致文件被删

微软近日确认Word应用中存在一个Bug,该漏洞可能导致用户在特定情况下错误地删除文件。该问题主要出现在文件命名过程中,如果用户在保存Word文件时采用特定的命名方式,文件可能会被移动到回收站。 根据微软支持中心的消息,如果用户…

MVS海康工业相机达不到标称最大帧率

文章目录 一、相机参数设置1、取消相机帧率限制2、修改相机图像格式3、调整相机曝光时间4、检查相机数据包大小(网口相机特有参数)5、 恢复相机默认参数6、 相机 ADC 输出位深调整 二、系统环境设置1、 网口相机设置2、 USB 相机设置 一、相机参数设置 …

java对接GPT 快速入门

统一对接GPT服务的Java说明 当前,OpenAI等GPT服务厂商主要提供HTTP接口,这使得大部分Java开发者在接入GPT时缺乏标准化的方法。 为解决这一问题,Spring团队推出了Spring AI ,它提供了统一且标准化的接口来对接不同的AI服务提供商…

毕设分享 大数据用户画像分析系统(源码分享)

文章目录 0 前言2 用户画像分析概述2.1 用户画像构建的相关技术2.2 标签体系2.3 标签优先级 3 实站 - 百货商场用户画像描述与价值分析3.1 数据格式3.2 数据预处理3.3 会员年龄构成3.4 订单占比 消费画像3.5 季度偏好画像3.6 会员用户画像与特征3.6.1 构建会员用户业务特征标签…

Linux查看下nginx及使用的配置文件

1、查到nginx进程 ps -aef | grep nginx2、通过进行pid查到nginx路径 pwdx <pid>3、根据路径得到配置文件 path***/nginx -t如下&#xff1a;

Unity网络开发基础 —— 实践小项目

概述 接Unity网络开发基础 导入基础知识中的代码 需求分析 手动写Handler类 手动书写消息池 using GamePlayer; using System; using System.Collections; using System.Collections.Generic; using UnityEngine;/// <summary> /// 消息池中 主要是用于 注册 ID和消息类…

(五)Proteus仿真STM32单片机串口数据流收发

&#xff08;五&#xff09;Protues仿真STM32单片机串口数据流收发 – ARMFUN 1&#xff0c;打开STM32CubeMX&#xff0c;找到USART1,配置模式Asynchronous&#xff0c;此时PA9、PA10自动变成串口模式 串口默认参数:115200bps 8bit None 1stop 2&#xff0c;NVIC Settings使能…

Linux-Docker阿里云镜像仓库失效

写在前面&#xff0c;这个是我很早之前在VmWare安装的Linux7,通过yum 安装的docker&#xff0c;但是今天怎么都无法pull镜像&#xff0c;报错如下。 Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waitin…

在IDEA里用XDebug调试PHP,断点....

做程序开发,调试必不可少,这里最近用到了PHP,顺便写个关于PHP的调试安装使用: 1、首先是PHP先安装xdebug扩展(还有zend的),这个我的工具是IDEA,所以安装方法也相对简单,如果你是用VSCode等应该也是一样,如下图,找到这个PHP->DEBUG 2、直接点上面的Install XDebug 就可以帮你…

Unity网络开发 - C#开源网络通信库PESocket的使用

概述 在现代多人在线游戏中&#xff0c;稳定且高效的网络通信是确保游戏体验的关键。本文将探讨如何利用C#开源网络通信库PESocket来构建一个简单的Unity客户端与.NET控制台服务器之间的实时消息传递系统。通过本例&#xff0c;读者不仅能够了解PESocket的基本用法&#xff0c…

Windows11系统下Sentinel环境搭建教程

目录 前言Sentinel简介Sentinel下载安装Sentinel配置与启动总结 前言 本文为博主在项目环境搭建时记录的Sentinel安装流程&#xff0c;希望对大家能够有所帮助&#xff0c;不足之处欢迎批评指正&#x1f91d;&#x1f91d;&#x1f91d; Sentinel简介 github主页地址 &#x…

004、合并两个有序数组

0、题目描述 合并两个有序数组 1、法1 数组nums1有m个元素&#xff0c; 直接在下标为m的位置处追加nums2的元素。然后再qsort整体排序。 —— —— qsort函数&#xff0c;&#xff08;数组首元素地址&#xff0c;排序的个数&#xff0c;排序元素大小&#xff0c; 比较函数&…

Vue】Vue扫盲(四)组件化思想与简单应用

【Vue】Vue扫盲&#xff08;一&#xff09;事件标签、事件修饰符&#xff1a;click.prevent click.stop click.stop.prevent、按键修饰符、及常用指令 【Vue】Vue扫盲&#xff08;二&#xff09;指令&#xff1a;v-for 、v-if、v-else-if、v-else、v-show 【Vue】Vue扫盲&…