使用vscode插件du-i18n处理前端项目国际化翻译多语言

前段时间我写了一篇关于项目国际化使用I18n组件的文章,Vue3 + TS 使用国际化组件I18n,那个时候还没真正在项目中使用,需求排期还没有定,相当于是预研。

当时就看了一下大概怎么用,改了一个简单的页面,最近需求下来了,开始整个项目去做了,才发现工作量有点大,好像也有点傻,一个个地取变量名,翻译,替换。。。换了几个页面之后,发现眼睛都要花了,又累又困,还容易出错,于是跟同事吐槽了一下,没想到有意外收获,好家伙,这种好事不早点分享!
在这里插入图片描述
在这里插入图片描述

于是请教了一下同事,然后自己也琢磨了一会,发现确实真香,所以记录一下。
这个插件是基于百度翻译提供的国际多语言本地开发解决方案,目前使用很流畅,大家也可以从vscode官网 Extensions 模块进去搜索Du I18N 找到该插件,也就是这个地址 Du I18N 传送门

一、安装i18n组件、DU I18N插件
// 使用 npm
npm install vue-i18n@9 
// 使用 yarn
yarn add vue-i18n@9

在VS code 插件库中搜索安装DU I18N插件
在这里插入图片描述

二、生成配置文件

安装完成之后在页面文件点击右键就可以看到国际化选项了,点击设置自动生成配置文件du-i18n.config.json
在这里插入图片描述
配置文件的配置项可以参考文档根据自己的需要进行配置,比如我需要翻译繁体,那我就要增加一个语种的配置,
语种配置的代码可以参考 百度翻译通用翻译API接入文档

在这里插入图片描述

三、一键扫描中文

在这里插入图片描述
在/src/i18n/temp/自动生成随机文件,路径和文件名都可以自主配置,界面中的中文一键替换成了随机变量
在这里插入图片描述

四、在线翻译

插件还提供了在线翻译功能,需要注册自己的baiduAppid和baiduSecrectKey,从百度翻译开放平台注册,注册完成后进入管理控制台申请开通服务, 再到开发者信息查看自己的baiduAppid和baiduSecrectKey,并填写到du-i18n.config.json配置文件中
在这里插入图片描述
即可翻译成已经配置的所需的语种,如下图,无需手动一个个翻译了,菜单中还有漏检功能
在这里插入图片描述

五、在i18n文件夹新建一个JS文件处理引入语言文件,默认语言等
// 引入语言文件
function loadLocaleMessages () {const locales = require.context('./locale', true, /[a-z0-9-]+\.json$/i);const messages = {};locales.keys().forEach(key => {const matched = key.match(/([a-z0-9-]+)\./i);if (matched && matched.length > 1) {const locale = matched[1];messages[locale] = locales(key);}});return messages;
}// i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';Vue.use(VueI18n);const i18n = new VueI18n({locale: 'zh', // set default localemessages: loadLocaleMessages(), // set locale messagessilentTranslationWarn: true,//隐藏这些报错
});export default i18n;

然后在main.js里面引用该文件,挂载上去
在这里插入图片描述

六、最后一步拆分语言文件,生成locale文件夹,这样就可以在界面上查看是否有效果了

在这里插入图片描述

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

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

相关文章

【Python系列】Python 中的日期和时间处理

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Vue3模拟国足18强赛抽签

Vue3国足18强赛抽签 国足遇到这个对阵&#xff0c;能顺利出现吗&#xff1f; 1、系统演示 Vue3模拟国足18强赛抽签 2、关键代码 开始抽签 <script setup> import FenDang from "/components/chouqian/FenDang.vue"; import {ref} from "vue";le…

赶紧收藏!2024 年最常见 20道设计模式面试题(三)

上一篇地址&#xff1a;赶紧收藏&#xff01;2024 年最常见 20道设计模式面试题&#xff08;二&#xff09;-CSDN博客 五、建造者模式&#xff1a;建造者模式如何解决复杂对象的构建问题&#xff1f; 建造者模式&#xff08;Builder Pattern&#xff09;是一种对象创建型设计…

看完轻松解决家里灰尘毛絮多难题?除粉尘的空气净化器品牌分享

家里的空气中弥漫着灰尘和毛絮&#xff0c;让人呼吸不畅&#xff0c;也影响着家人的健康。灰尘中含有各种有害物质&#xff0c;如细菌、病毒、花粉等&#xff0c;长期吸入会导致呼吸道疾病、皮肤过敏等问题。尤其是对于有宠物、孩子、过敏人群来说&#xff0c;空气质量更是至关…

关于办公软件的使用

第一部分&#xff1a; 常用函数的使用 在使用的地方&#xff0c;输入SUM(B2:F2)回车 第二部分&#xff1a; 自定义函数的使用 1、打开 宏编辑 2、 自定义函数方法 3、自定义函数的使用和常用函数一样&#xff1a; 在使用的地方&#xff0c;输入计算面积(A3&#xff0c;B3)…

游戏试玩站打码zq平台系统可运营的任务网源码

安装说明 1.恢复数据&#xff1b; 2.数据连接库配置路径&#xff1a;protected\config\mail.php 文件中修改第60行 &#xff08;记得不要用记事本修改&#xff0c;否则可能会出现验证码显示不了问题&#xff0c;建议用Notepad&#xff09; 3.浏览器访问输入 127.0.0.2 显示界…

Hype4.0 for Mac软件下载-Hype for Mac HTML5 创作工具下载附加详细安装步骤

Hype 4 Pro Mac正式版是款功能实用的动画创作工具。Hype 4 Pro Mac最新版可以帮您轻松创建令人惊叹的动画和交互式网页内容。并且Hype 4 Pro Mac还可被设计师用来创建动画&#xff0c;为网页、信息图形、演示文稿、数字杂志、广告、iBooks、教育内容、应用程序原型、作品集、动…

C# —— 字典

简介 字典: 包含一个key(键)和这个key所对应的value(值),字典是无序的,key是唯一的&#xff0c;可以根据key获取值。可以吧键当成数组的索引值进行理解 <> 泛型 定义一个字典 new Dictionary<key的类型, value值的类型>() var dic new Dictionary<string, s…

Flume基础教程

Apache Flume教程 资料来源&#xff1a;Apache Flume - Introduction (tutorialspoint.com) Flume是一个标准的、简单的、健壮的、灵活的、可扩展的工具&#xff0c;用于将从各种数据生产者(web服务器)中所产生的数据抽取到Hadoop中。在本教程中&#xff0c;我们将使用简单的…

软件测试技术(一):软件测试流程

软件测试流程 软件测试流程如下&#xff1a; 测试计划测试设计测试执行 单元测试集成测试确认测试系统测试验收测试回归测试验证活动 测试计划 测试计划由测试负责人来编写&#xff0c;用于确定各个测试阶段的目标和策略。这个过程将输出测试计划&#xff0c;明确要完成的测…

ch552g使用torch-pad测试触摸按键遇到的问题

基本工作原理 通过设置好功能在寄存器和控制寄存器检测引脚输入的值。 实际检测阶段分为3个步骤&#xff1a;第一阶段&#xff1a;选择需要检测的阶段&#xff0c;选择扫描周期1或2ms&#xff0c;开启触摸按键中断&#xff0c;然后在87us内为充电准备阶段&#xff0c;87us内数…

Matplotlib(小案例)

1、3D表面形状的绘制 from mpl_toolkits.mplot3d import Axes3D import matplotlib.pyplot as plt import numpy as np import matplotlib as mplfigplt.figure() axfig.add_subplot(111,projection3d)unp.linspace(0,2*np.pi,100) vnp.linspace(0,np.pi,100) x10*np.outer(n…

Faiss assertion ‘err == cudaSuccess‘ failed in void faiss::gpu:runL2Norm()

Faiss assertion ‘err cudaSuccess’ failed in void faiss::gpu:runL2Norm(). details:CUA error 209 no kernel image is available for execution on the device 本人使用的ubuntu 22.04系统&#xff0c;conda的环境。使用pip安装faiss-gpu出现的问题。 pip install fai…

心跳机制讲解及实例

什么是心跳机制 心跳机制出现在tcp长连接中&#xff0c;客户端和服务器之见定时发送一种特殊的数据包通知对方还在线&#xff0c;以确保tcp链接地可靠性&#xff0c;有可能tcp链接由于某些原因(列入网线被拔了&#xff0c;突然断电)导致客户端断了&#xff0c;但是服务器不知道…

从11个视角看全球Rust程序员3/4:深度解读JetBrains最新报告

讲动人的故事,写懂人的代码 6 Rust程序员都在用什么IDE? 基于之前的讨论,小吾想今年底的IntelliJ全球程序员生态报告出来后,IDE使用的情况可能会发生一些变化。小吾预计会有更多的程序员从IntelliJ IDEA和CLion转向RustRover。 55%的程序员在使用Visual Studio Code24%的程…

编程猫少儿编程怎么下载:详细步骤与实用指南

编程猫少儿编程怎么下载&#xff1a;详细步骤与实用指南 在数字化教育浪潮的推动下&#xff0c;编程猫少儿编程作为一款专为青少年设计的图形化编程工具平台&#xff0c;受到了越来越多家长和孩子的青睐。那么&#xff0c;如何下载并安装这款应用呢&#xff1f;接下来&#xf…

PostgreSQL源码分析——bgwriter

为什么会有bgwriter bgwriter进程主要负责将共享缓冲区&#xff08;Buffer&#xff09;中的脏页刷盘&#xff0c;这个进程主要是从数据库性能的考虑而加的&#xff0c;如果没有这个进程&#xff0c;数据库一样可以工作。所以&#xff0c;这里重点理解的就是bgwriter进程对性能…

SQL注入-中篇

SQL盲注 一、时间盲注 模拟环境&#xff1a;Less-9 概述 延迟注入&#xff0c;一种盲注的手法&#xff0c;提交对执行时间敏感的sql语句&#xff0c;通过执行时间的长短来判断是否执行成功。 时间注入函数 sleep() if() ascii() substring() length() mid()判断是否存在延…

存储文件夹下所有.cpp和.h的代码到对应的txt文件里

最近大半年刷了160多天的题&#xff0c;每次刷的时候都要新建一个VS文件&#xff0c;所以文件内存太大了&#xff0c;又舍不得删&#xff0c;就用ai整了一个脚本&#xff0c;可将当前路径下的所有文件里的.cpp和.h文件储存到相应名字的txt文件里&#xff0c;若文件夹下还有文件…

SpringBoot + Maven 项目的创建

文章目录 1、Maven2、SpringBoot3、二者之间的联系4、项目的创建 在创建项目之前&#xff0c;肯定要知道他们之间的区别 1、Maven maven是一个跨平台的项目管理工具。它是Apache的一个开源项目&#xff0c;主要服务于基于Java平台的项目构建、依赖管理和项目信息管理。 比如说…