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

news2025/1/10 21:31:25

前段时间我写了一篇关于项目国际化使用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 locale
    messages: loadLocaleMessages(), // set locale messages
    silentTranslationWarn: true,//隐藏这些报错
});

export default i18n;

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

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

在这里插入图片描述

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

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

相关文章

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…

python+unity手势控制地球大小

效果图如下 具体操作如下 1 在unity窗口添加一个球体 2 给球体添加材质,材质图片使用地球图片 地球图片如下 unity材质设置截图如下 3 编写地球控制脚本 using System.Collections; using System.Collections.Generic; using UnityEngine;public class test : MonoBehavio…

codeforces round 953 div2

A Alice and books 题目&#xff1a; 思路&#xff1a;编号最大的肯定会被读到&#xff0c;所以在编号最大的这一组书中不能存在除去最大编号的外书外页数最大的书&#xff0c;并且在另一堆中这本书的编号也应该是最大值 代码&#xff1a; #include <iostream>using…

从“小IPD”到“大IPD”

IPD体系实施或变革是一个长期的系统工程&#xff0c;业界经常有从“小IPD”到“大IPD”的说法。 像华为当年就是从“产品开发流程”开始推行&#xff0c;算是很小范围的“小IPD”了&#xff0c;后面逐步扩大为“大IPD”&#xff0c;如上图所示。其中前端的市场管理&#xff08;…

【讲解下Pip换源】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

高危CNVD|用友-U8-OA基础版存在文件上传漏洞getshell

漏洞描述 用友U8-OA基础版存在任意文件覆盖写入漏洞 漏洞说明&#xff1a;用友U8-OA基础版因为代码问题&#xff0c;存在任意文件覆盖写入漏洞&#xff0c;可以覆盖写入系统中存在的文件&#xff0c;可getshell。FOFA指纹: body"致远" && "/yyoa/&quo…

产品经理必须要知道的电商项目搭建中需要用到的常见的电商API接口

今天主要分享产品经理设计电商类应用需要了解的常用API&#xff1f; 为什么产品经理需要了解常用电商API接口呢&#xff1f; 1.开需求会&#xff0c;提了新的需求&#xff0c;开发说&#xff0c;你这个需求太复杂&#xff0c;光接口就有20几个&#xff0c;按照排期根本做不完…

(四十二)Vue之路由及其基本使用Vue Router

文章目录 概念基本使用demo几个注意点 上一篇&#xff1a;&#xff08;四十一&#xff09;Vuex之模块化与命名空间 概念 在计算机科学和网络领域中&#xff0c;路由&#xff08;Routing&#xff09;是指确定数据包在网络中传输的路径和方式的过程。它涉及到根据源地址和目标地…

Leaflet地图实例

ReactTypeScript实例&#xff1a; import React, { useEffect, useRef } from "react"; import * as L from "leaflet"; import "leaflet/dist/leaflet.css";const App: React.FC () > {const mapRef useRef<HTMLDivElement>(null);…

RNN的变种们:GRULSTM双向RNN

上篇笔记记录到RNN的一个缺点&#xff1a;训练时会出现梯度消失&#xff0c;解决的办法是找到一个更优的计算单元。这里也有GRU和LSTM。 GRU&#xff08;Gated Recurrent Unit&#xff09;门控训练网络 什么是门控机制&#xff1f;就是对当前的输入进行一个筛选。门打开&…

如何优雅地限制textarea的输入字数?

大家好&#xff0c;我是瑶山&#xff0c;今天聊聊textarea textarea 有基础的同学都知道<textarea>是HTML中的一个标签&#xff0c;用于定义多行的文本输入控件。它允许用户在表单中输入多行文本&#xff0c;相较于单行输入框可以输入更多的内容。 但是&#xff0c;如果…

通过ModelScope开源Embedding模型将图片转换为向量

本文介绍如何通过ModelScope魔搭社区中的视觉表征模型将图片转换为向量&#xff0c;并入库至向量检索服务DashVector中进行向量检索。 ModelScope魔搭社区旨在打造下一代开源的模型即服务共享平台&#xff0c;为泛AI开发者提供灵活、易用、低成本的一站式模型服务产品&#xf…

【MySQL】聊聊数据库是如何保证数据不丢的

对于一个存储系统来说&#xff0c;其中比较关键的核心组件包含&#xff0c;网络、存储模型、持久化、数据结构等。而数据如何保证不丢失&#xff0c;对于不同的存储系统来说&#xff0c;比如Redis采用AOF和RDB的方式进行混合使用&#xff0c;而MySQL采用日志进行保证。也就是re…

SQL注入-中篇

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

如何解决 NumPy 无法计算其中一个 5 元素列表的标准差的问题

问题背景 在使用 NumPy 计算统计结果时发现&#xff0c;NumPy 能够接受原始数据列表来计算标准差&#xff0c;却无法接受经过计算后的结果列表。尝试将 std(f10) 替换为 std(solf10)&#xff0c;但引发了错误&#xff1a;AttributeError: Float object has no attribute sqrt。…

【前端】 nvm安装管理多版本node、 npm install失败解决方式

【问题】If you believe this might be a permissions issue, please double-check the npm ERR! permissio或者Error: EPERM: operation not permitted, VScode中npm install或cnpm install报错 简单总结&#xff0c;我们运行npm install 无法安装吧包&#xff0c;提示权限问题…

Apache Royale

Apache Royale 顶级项目 Apache Royale 之前adobe的flex&#xff0c;由于浏览器flash&#xff0c;安全沙箱问题&#xff0c;逐步退出市场&#xff0c;当年flex也就是AS3&#xff0c;浏览器统一兼容问题又停止了。 接着要说明一点&#xff0c;HTML5的自适应是在flex之后&#x…

【正则表达式】入门

参考视频&#xff1a;10分钟快速掌握正则表达式_哔哩哔哩_bilibili 这个网站用来测试写的正则表达式效果&#xff1a;regex101: build, test, and debug regex 示例&#xff1a; 限定符 ? 表示前一个字符可有可无 比如这里输入&#xff1a;de? 匹配结果可以得到d和de * 前…

数据安全未来之路,天空卫士荣誉领榜《中国数据安全50强(2024)》

《中国数据安全50强&#xff08;2024&#xff09;》 数世咨询首份《中国数据安全50强&#xff08;2024&#xff09;》报告发布。天空卫士凭借其卓越的技术创新、市场领导力、业务收入能力和企业发展能力&#xff0c;在众多竞争者中脱颖而出&#xff0c;荣登50强榜单&#xff0…

26 红黑树

目录 1.概念 2.性质 3.节点定义 4.结构 5.插入 6.验证 7.删除 8.红黑树和avl树比较 9.应用 概念 是一种二叉搜索树&#xff0c;但在每个节点上增加一个存储位表示节点的颜色&#xff0c;可以是red或black。通过对任何一条从根到叶子的路径上各个节点着色方式的限制&#xff…