使用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.rhkb.cn/news/353965.html

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

相关文章

qt事件和连接TCP协议

QT网络聊天室服务器实现 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget),server(new QTcpServer(this))//给服务器指针实例化一个空间 {ui->setupUi(this); }Widget::~Widget() {d…

python Django安装及怎么检测是否安装成功

一、winr 输入cmd 进入控制台。输入pip install Django5.0.1 二、如果安装过程没有问题。就进行下一步进行检查是否成功安装。 三、 1.在控制台输入python,进入python环境 2.输入 import django 3.继续输入 django.get_version()。显示版本号表示成功安装。

MySQL8,Navicat能登陆成功,密码却忘记了

执行成功的图: 以下为步骤:本文一共8个简单步骤。 环境:mysql8、window10、navicat11 1、打开本地电脑window10的命令窗(俗称黑窗口),windowR 2、输入regegit,回车,打开注册表 3、…

揭开AI大模型的神秘面纱:一文看懂GPT-4的核心技术

近年来,人工智能(AI)技术迅猛发展,特别是AI大模型的崛起,给人们的生活和工作带来了深远的影响。作为其中的佼佼者,GPT-4备受瞩目。那么,GPT-4的核心技术究竟是什么?它是如何运作的&a…

win10远程桌面端口,win10操作系统怎么修改远程桌面端口和共享端口号

在Win10操作系统中,远程桌面端口和共享端口号的修改是两项重要的网络配置任务,它们对于提升系统的安全性和灵活性具有重要意义。以下将分别介绍如何在Win10中修改这两个端口号。 一、Win10操作系统远程桌面端口的修改 远程桌面端口的修改主要涉及到注册…

【毕业设计】Django 校园二手交易平台(有源码+mysql数据)

此项目有完整实现源码,有需要请联系博主 Django 校园二手交易平台开发项目 项目选择动机 本项目旨在开发一个基于Django的校园二手交易平台,为大学生提供一个安全便捷的二手物品买卖平台。该平台将提供用户注册和认证、物品发布和搜索、交易信息管理等…

【C++高阶】高效搜索的秘密:深入解析搜索二叉树

📝个人主页🌹:Eternity._ ⏩收录专栏⏪:C “ 登神长阶 ” 🤡往期回顾🤡:C多态 🌹🌹期待您的关注 🌹🌹 ❀二叉搜索树 📒1. 二叉搜索树&…

Java——构造器(构造方法)和 this

一、什么是构造器 构造器(Constructor)是Java类的一种特殊方法,用于初始化对象的状态。构造器在创建对象时被调用,可以对对象的成员变量进行初始化。 我之前的文章《Java——类和对象-CSDN博客》中也提到了构造器。 二、构造器…

银行数仓项目实战(四)--了解银行业务(存款)

文章目录 项目准备存款活期定期整存整取零存整取存本取息教育储蓄定活两便通知存款 对公存款对公账户协议存款 利率 项目准备 (贴源层不必写到项目文档,因为没啥操作没啥技术,只是数据。) 可以看到,银行的贴源层并不紧…

【两数之和】

两数之和 一、题目二、暴力解法三、哈希表四、map字典1.基本方法.set()添加键值对.get()通过键获取值.has()判断map是否有这个键 2.map和set的联系和区别共同点共同点MapSet 一、题目 二、暴力解法 三、哈希表 解题思路:将nums的元素依次以键值对的方式存储在map字典…

java 线程之间通信-volatile 和 synchronized

你好,我是 shengjk1,多年大厂经验,努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注!你会有如下收益: 了解大厂经验拥有和大厂相匹配的技术等 希望看什么,评论或者私信告诉我! 文章目录 一…

python学习笔记-08

面向对象基础(OOP)-上 1. 面向对象概述 面向过程:根据业务逻辑从上到下写代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象(object oriented programming):将数据与函数绑定到一起…

通过Vue3+高德地图的JS API实现市区地图渲染

效果图1: 核心代码1: <script setup>import { onMounted, onUnmounted } from vue;import AMapLoader from @amap/amap-jsapi-loader;import { message } from ant-design-vue;import school from @/assets/icons/school.svg;import enterprise from @/assets/icons/e…

laravel版本≥ 8.1

laravel10 php ≥ 8.1 且 ≤ 8.3&#xff1f; 8.1 < php < 8.3PHP版本要求在 8.1 到 8.3 之间&#xff0c;包括这两个版本。具体来说&#xff1a;"≥ 8.1" 表示 PHP 的版本至少是 8.1&#xff0c;也就是说 8.1 及以上的版本都可以。 "≤ 8.3" 表示 P…

3dmax怎么渲染又快又清晰?

在3ds Max中&#xff0c;追求快速且清晰的渲染效果是每个设计师的目标。云渲染技术的出现&#xff0c;为这一目标提供了强大的支持。通过云渲染&#xff0c;设计师能够利用远程服务器的强大计算能力&#xff0c;实现快速渲染&#xff0c;同时保持图像的高清晰度。 一、3dmax怎么…

C++ 75 之 异常的传递

#include <iostream> #include <string> using namespace std;// 1.自己准备好一个类&#xff0c;写自己要打印的内容 class MyException{ public:void printE(){cout << "我自己写的异常" << endl;} };class Students02{ public:Students02…

若依 ruoyi 显示隐藏搜索框 显示隐藏列

一、 显示隐藏搜索框 页面搜索关键字 showSearch&#xff0c;设置是否显示 隐藏&#xff1a; 显示&#xff1a; 二、自定义设置 显示隐藏列 1. 页面搜索关键字 right-toolbar&#xff0c;新增&#xff1a; :columns"columns" 2. js下 data(){return{}}中新增&am…

js语法---理解反射Reflect对象和代理Proxy对象

Reflect 基本要点 反射&#xff1a;reflect是一个内置的全局对象&#xff0c;它的作用就是提供了一些对象实例的拦截方法&#xff0c;它的用法和Math对象相似&#xff0c;都只有静态方法和属性&#xff0c;同时reflect也没有构造器&#xff0c;无法通过new运算符构建实例对象&…

WinRAR应用文件图标是白色怎么解决

1.打开程序-选项-设置 2.找到集成-选择全部切换&#xff0c;保存即可。

Mobvista汇量科技解析奥运机会点及营销理念,看广告投放如何抢占先机

四年一度的奥运盛会&#xff0c;作为少有能跨越文化、宗教、种族、行为等各方面差异的体育事件&#xff0c;更能广泛吸引全球观众的目光&#xff0c;成为品牌方和广告主天然的流量磁铁。应用增长平台Mobvista汇量科技为助力各行业开发者、各品牌商家抢占奥运流量&#xff0c;分…