当前位置：首页 > news >正文

i18next在vue3中的应用，可参考写法或直接复用

news 来源：原创 2025/6/28 5:25:40

i18next是一个国际化相关的的依赖，适配多种框，比如vue2/3，react，next.js等等，是一个非常实用的依赖。在一次项目中接触过i18n相关内容，因此今天就整理一下这个通用的插件。

官网：Introduction | i18next documentation

i18next使用步骤：

1.安装依赖：npm install -S vue3-i18next

2.编辑配置文件

//我放在了public下，public/locales.js
import i18next from "i18next";
import { createI18n } from "vue3-i18next";const locales = {en: {message: {hello: 'Hello!',loadbundle: 'Load bundle language: {{lang}}',},},zh: {message: {//命名空间，相当于一个模块hello: '你好!',loadbundle: '当前语言: {{lang}}',},message2:{hello: '不好!',loadbundle: '当前语言: {{lang}}',}},
};
const options = {initImmediate: true,//是否异初始化lng: "zh",//默认语言fallbackLng: "zh",//回退语言，当前语言找不到对应翻译使用的语言saveMissing: true,//当翻译键缺失时，是否将缺失的翻译发送到服务器（适用于服务端管理语言包）。resources: {//设置更多语言en: {translation: locales.en,},zh: {translation: locales.zh,},},
};
i18next.init(options);
export const i18n = createI18n(i18next);

3.在main.js/main.ts中引入

import { createApp } from "vue";
import App from "./App.vue";
import {i18n} from "/public/locales"//引入第二步中暴露的内容const app = createApp(App);
app.use(i18n);//使用配置的内容
app.mount("#app");

4.在组件中使用

<template><div id="app"><p>{{ $t('message2.hello') }}</p>//两个设置的可切换语言的内容，命名空间+key<p>{{ loadbundle() }}</p>//因为loadbundle中有变量，所以使用方法传入变量<label for="language-select">选择语言：</label>//模拟切换语言<select id="language-select" v-model="lang" @change="changeLanguage(map[lang])"><option value="中文">中文</option><option value="English">English</option></select></div>
</template><script lang="ts" setup>
import { useI18next } from "vue3-i18next";
import { ref, watch } from "vue";
const i18n = useI18next();
let lang=ref('中文');
const map={//提供页面展示和语言配置之间的映射关系'中文':"zh",'English':"en"
}
const loadbundle = () => i18n.t('message.loadbundle', {lang: `${lang.value}`});//i18n.t 是 i18next 提供的翻译方法 t，用来获取翻译字符串。const changeLanguage = (val) => {i18n.changeLanguage(val); // 当select改变后切换语言
};</script>

上述就是一个完整的使用过程，本文以vue3作为案例，在其他框架中使用方法也类似。

i18next在vue3中的应用，可参考写法或直接复用

i18next是一个国际化相关的的依赖，适配多种框，比如vue2/3，react，next.js等等，是一个非常实用的依赖。在一次项目中接触过i18n相关内容，因此今天就整理一下这个通用的插件。官网：Introduction …...

编程日记 2025/6/28 5:25:40

DM数据迁移工具

DM数据迁移工具一、概述二、迁移准备三、启动迁移工具1.Windows 环境启动 DM 数据迁移工具2.Linux 环境启动 DM 数据迁移工具2.1启用图形化安装界面前需要通过如下命令将图形界面权限放开：2.2进入数据库安装路径 /tool 目录下，运行 ./dts 即可启动 DM 数…...

编程日记 2025/6/28 4:21:21

Python入门（4）：函数

目录 1 基本概念 1.1 函数的定义与调用 2 函数的参数 2.1 位置参数（Positional Arguments） 2.2 默认参数（Default Arguments） 2.3 关键字参数（Keyword Arguments） **2.4 可变参数（*…...

编程日记 2025/6/27 21:12:04

Java基础-25-继承-方法重写-子类构造器的特点-构造器this的调用

在面向对象编程中，继承是实现代码复用和扩展的重要机制。通过继承，子类可以继承父类的属性和方法，并且可以通过方法重写来改变或扩展父类的行为。此外，构造器在对象初始化过程中扮演了重要角色，尤其是在子类构造器中如…...

编程日记 2025/6/28 6:33:06

Mysql之事务(上)

🏝️专栏：Mysql_猫咪-9527的博客-CSDN博客 🌅主页：猫咪-9527-CSDN博客 “欲穷千里目，更上一层楼。会当凌绝顶，一览众山小。” 目录 1.什么需要为事务？ 2.事务的四个特性 1. 原子性&#xff0…...

编程日记 2025/6/27 12:54:33

2025华为软件精英挑战赛2600w思路分享

这里写自定义目录标题得分展示对象定义请求价值计算时间同步删除操作完整思路得分展示对象定义 // 将一个磁盘划分为多个基于标签聚合的区块 class Block{ public:int tag 0; // 区块标签int start_pos;int end_pos;int id;int use_size 0;int v;// 为区块确定范围Bloc…...

编程日记 2025/6/28 4:52:36

LSTM网络是什么？

环境： LSTM网络问题描述： LSTM网络是什么？ 解决方案： LSTM 网络解释 LSTM（Long Short-Term Memory）网络是一种特殊的递归神经网络（RNN），能够学习长期依赖关系。L…...

编程日记 2025/6/28 2:26:41

bert自然语言处理框架

自然语言处理框架目录自然语言处理框架bert自然语言处理框架概念核心特点应用场景框架和数据集结构编码-解码框架Self-Attention 机制multi-headed机制位置编码Add与Normalize整体框架outputs训练数据集 bert自然语言处理框架概念 BERT（Bidirectional Encoder …...

编程日记 2025/6/28 5:08:28

UE5学习笔记 FPS游戏制作33 游戏保存

文章目录核心思想创建数据对象创建UIUI参数和方法打开UI存档文件的位置可以保存的数据类型核心思想 UE自己有保存游戏的功能，核心节点，类似于json操作，需要一个数据类的对象来进行保存和读取创建存档加载存档保存存档创建数据对象…...

编程日记 2025/6/28 6:28:11

【超详细】一文解决更新小米澎湃2.0后LSPose失效问题

【超详细】一文解决更新澎湃2.0后LSPose失效问题问题分析： 出现这个问题大多是因为本次为大版本更新A14->A15,因此原来的LSPose无法支持新系统特性导致的，因此我们从此出发解决这个问题。方案一（magisk）： 直接…...

编程日记 2025/6/28 7:15:28

Python爬虫教程007：scrapy结合实际案例的简单使用

文章目录 3.1 scrapy安装3.2 scrapy的基本使用3.2.1 scrapy项目的创建和运行3.3 58同城案例3.3.1 创建案例3.3.2 项目结构说明3.4 汽车之家案例3.1 scrapy安装什么是scrapy： Scrapy是一个为了爬取网站数据，提取结构性数据而编写的应用框架。可以应用在包括数据挖掘、信息处…...

编程日记 2025/6/28 6:15:01

【可能性：如何从已有条件中分析一件事情是否会发生？关键字摘抄】

是否可以直接从前提条件给出的信息中，推理出一件事情是否会发生呢？还真的可以，这一讲，我们就来说说，什么是逻辑上的必然性，可能性和排他性。白马非马？ 春秋战国百家争鸣时期，名家…...

编程日记 2025/6/28 7:09:22

WPS JS宏编程教程（从基础到进阶）-- 第四部分：函数与自定义功能开发

第四部分：函数与自定义功能开发 1. 函数的创建与调用**基础概念****1.1 命名函数与匿名函数****命名函数示例：计算矩形面积****匿名函数示例：动态赋值****1.2 箭头函数****特点**：简化语法，自动继承外层 `this`。2. 自定义函数实战**2.1 身份证信息提取函数****功能**：从…...

编程日记 2025/6/28 6:19:21

Pytorch 张量操作

在深度学习中，数据的表示和处理是至关重要的。PyTorch 作为一个强大的深度学习框架，其核心数据结构是张量（Tensor）。张量是一个多维数组，类似于 NumPy 的数组，但具有更强大的功能，尤其是在 GPU …...

编程日记 2025/6/28 5:50:51

constant(safe-area-inset-bottom)和env(safe-area-inset-bottom)在uniapp中的使用方法解析

在微信小程序中，padding-bottom: constant(safe-area-inset-bottom); 和 padding-bottom: env(safe-area-inset-bottom); 这两个 CSS 属性用于处理 iPhone X 及更高版本设备的安全区域（safe area）。这些设备的底部有一个“Home Indicator”&a…...

编程日记 2025/6/28 4:55:50

ROS相关学习笔记

以下是创建并初始化一个新的 catkin 工作空间的具体步骤 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src catkin_init_workspace #这会在 src 目录下创建一个 CMakeLists.txt 文件构建工作空间进入工作空间根目录并构建 cd ~/catkin_ws catkin_make 或者，…...

编程日记 2025/6/28 1:19:57

大模型专题10 —LangGraph高级教程：构建支持网页搜索+人工干预的可追溯对话系统

在本教程中，我们将使用 LangGraph 构建一个支持聊天机器人，该机器人能够： ✅ 通过搜索网络回答常见问题 ✅ 在多次调用之间保持对话状态 ✅ 将复杂查询路由给人工进行审核 ✅ 使用自定义状态来控制其行为 ✅ 进行回溯并探索替代的对话路径我们将从一个基础的聊天机器人开…...

编程日记 2025/6/28 7:16:04

rbpf虚拟机-汇编和反汇编器

文章目录一、概述二、主要功能三、关键函数解析3.1 汇编器3.1.1 parse -转换为Instruction列表3.1.2 assemble_internal-转换为Insn 3.2 反汇编器3.2.1 to_insn_vec-转换为机器指令四、总结 Welcome to Code Blocks blog 本篇文章主要介绍了 [rbpf虚拟机-汇编和反汇编器] ❤…...

编程日记 2025/6/27 10:20:41

压测数据说话：如何用科学方法选择最优高防套餐？

一、压测数据到高防参数的映射规则 1. 带宽需求计算所需防护带宽压测崩溃带宽安全系数（建议1.5倍） 示例：测试崩溃值50Gbps → 选择75G套餐（群联资费表“100G套餐￥8,500/月”） 2. 连接数容量评估 …...

编程日记 2025/6/28 4:31:23

【初阶数据结构】队列

文章目录目录一、概念与结构二、队列的实现队列的定义 1.初始化 2.入队列 3.判断队列是否为空 4.出队列 5.取队头数据 6.取队尾数据 7.队列有效个数 8.销毁队列三.完整源码总结一、概念与结构概念：只允许在一端进行插入数据操作，在另一端进行删除…...

编程日记 2025/6/28 5:58:30

ai说js的instanceof是什么怎么用

instanceof 是一个用于检测对象是否是某个构造函数的实例的操作符 （1）检测内置类型对于 JavaScript 的内置类型，instanceof 可以用来检测对象是否是某种内置类型的实例。 let arr [1, 2, 3]; console.log(arr instanceof Array); // tru…...

编程日记 2025/6/28 6:26:02

PyTorch中知识蒸馏浅讲

知识蒸馏在 PyTorch 中，使用 teacher_model.eval() 和冻结教师模型参数是知识蒸馏（Knowledge Distillation）中的关键步骤。 1. teacher_model.eval() 的作用目的：将教师模型切换到评估模式，影响某些特定层（如 Dropout、BatchNorm）的行为。具体影响： Dropo…...

编程日记 2025/6/28 4:03:34

服务器自动备份到本地，服务器自动备份到本地的方法有哪些？

服务器自动备份到本地是确保数据安全和系统恢复能力的关键步骤。以下是几种常见的服务器自动备份到本地的方法： 一、使用系统自带的备份工具 Windows Server Windows Server Backup 简介：Windows Server Backup是Windows Server操作系统内置的备份和…...

编程日记 2025/6/27 18:37:25

Vue+Elementui首页看板

源码 <template><div class="optimize-norm" v-loading="selectDataLoading"><el-form :model="queryParams" ref="queryRef" style="padding-bottom:8px" :inline="true"…...

编程日记 2025/6/28 3:54:33

力扣HOT100之链表：141. 环形链表

这道题都已经刷烂了，没啥好说的，就是定义快慢指针，慢指针每次移动一步，快指针每次移动两步，如果链表中有环，那么快指针一定会追上慢指针，追上时直接返回true，否则快指针会直接到达链…...

编程日记 2025/6/28 7:10:12

说明： vue实现俄罗斯方块效果图： step1:C:\Users\wangrusheng\PycharmProjects\untitled3\src\views\Game.vue <script setup> import { ref, reactive, computed, onMounted, onUnmounted } from vueconst SHAPES [[[1, 1, 1, 1]], // I[[1, …...

编程日记 2025/6/28 5:53:32

Web3.0隐私计算与云手机的结合

Web3.0隐私计算与云手机的结合 Web3.0隐私计算与云手机的结合，标志着从“数据垄断”向“数据自主”的范式转变。通过技术互补，两者能够构建更安全、高效且用户主导的数字生态。尽管面临技术整合和成本挑战，但随着区块链、AI和分布式存储的成…...

编程日记 2025/6/28 5:05:58

git | 版本切换的相关指令

常见指令 git log --oneline #查看历史提交 git tag latest-backup # 对当前的提交进行标记，标记名为latest-backup git checkout -b old-version 55b16aa # 切换到[55b16aa]的提交中，并标记为[old-version]的分支 git checkout master …...

编程日记 2025/6/28 2:58:52

基于 Fluent-Bit 和 Fluentd 的分布式日志采集与处理方案

#作者：任少近文章目录需求描述系统目标系统组件Fluent BitFluentdKafka 数据流与处理流程日志采集日志转发到 Fluentd日志处理与转发到 KafkaKafka 作为消息队列具体配置Fluent-Bit的CM配置Fluent-Bit的DS配置Fluentd的CM配置Fluentd的DS配置Kafka查询结果需求…...

编程日记 2025/6/28 7:10:25

【渗透测试】Vulnhub靶机-FSoft Challenges VM: 1-详细通关教程

下载地址：https://www.vulnhub.com/entry/fsoft-challenges-vm-1,402/ 目录前言信息收集目录扫描 wpscan扫描修改密码反弹shell 提权思路总结前言开始前注意靶机简介，当第一次开机时会报apache错误，所以要等一分钟后重启才…...

编程日记 2025/6/28 4:50:56

c语言strcat和strlen的注意事项

1 .strlen C库函数size_t strlen(const char* str)计算字符串str的长度，直到空字符，不包括空字符。在C语言中，字符串实际上是使用空字符\0结尾的一维字符数组。空字符（Null character）又称结束符，缩写NUL&…...

编程日记 2025/6/28 3:42:09

本地RAG知识库，如何进行数据结构化和清洗？

环境： 数据结构化和清洗问题描述： 本地RAG知识库，如何进行数据结构化和清洗？ 解决方案： 1. 数据结构化的重要性 RAG技术需求：在检索增强生成（Retrieval-Augmented Generation, RAG&#xf…...

编程日记 2025/6/28 5:09:13

开源测试用例管理平台

不可错过的10个开源测试用例管理平台： PingCode、TestLink、Kiwi TCMS、Squash TM、FitNesse、Tuleap、Robot Framework、SpecFlow、TestMaster、Nitrate。开源测试用例管理工具提供了一种透明、灵活的解决方案，使团队能够在不受限的情况下适应具体的测…...

编程日记 2025/6/28 5:52:15

OpenAI最近放出大新闻，准备在接下来的几个月内推出一款“开放”的语言模型

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/6/28 5:45:09

锁策略--

文章目录乐观锁和悲观锁轻量锁和重量锁自旋锁和挂起等待锁读写锁和互斥锁可重入锁和不可重入锁公平锁和非公平锁乐观锁和悲观锁乐观锁在执行任务前预期竞争不激烈，就先不添加锁等到了发生了真实的锁竞争再进行锁竞争乐观锁适用于锁竞争不激烈的情况下悲观锁在…...

编程日记 2025/6/28 6:11:53

IO多路复用

BIO（同步阻塞） 当客户端请求连接到服务端请求过程中其实是通过socket连接，socket的意思其实就是插座，可以理解成手机需要充电，这里的电要从服务端获取，手机的充电口和服务端的插座都是socket，假…...

编程日记 2025/6/28 4:45:49

AF3 OpenFoldSingleDataset类解读

AlphaFold3 data_modules 模块的 OpenFoldSingleDataset类是 OpenFold 中的一个数据集类，继承自 torch.utils.data.Dataset，用于加载和处理蛋白质结构数据，以支持 AlphaFold3 相关的深度学习任务。OpenFoldSingleDataset 读取的多序列比对（MSA）数据、模板（template）特征…...

编程日记 2025/6/28 6:21:38

高级java每日一道面试题-2025年3月21日-微服务篇[Nacos篇]-什么是Nacos？

如果有遗漏,评论区告诉我进行补充面试官: 什么是Nacos？ 我回答: Nacos综合解析一、Nacos的定义与功能 Nacos是阿里巴巴开源的一个专注于动态服务发现、配置管理和服务管理平台，其名称来源于Dynamic Naming and Configuration Service（…...

编程日记 2025/6/28 3:59:46

C++练习3

练习终端上输出 3.14 要求实现 myDouble的 operator operator- operator* （不考虑进位） class myOut { 没有私有成员只有公开函数 } myOut out; out << 1 终端输出1 out << 3.14 终端输出3.14 out << "hello" 终…...

编程日记 2025/6/28 1:20:09

Deepseek API+Python 测试用例一键生成与导出 V1.0.6（加入分块策略，返回更完整可靠）

随着Deepseek APIPython 测试用例一键生成与导出 V1.0.5的试用不断深入，在处理需求文档内容时，会出现由于文档内容过长导致大模型返回的用例远达不到我们的期望数量；另一方面，是接口文档的读取，如果接口数量过多&#…...

编程日记 2025/6/28 4:29:57

JDK 17 + Spring Boot 3 全栈升级实战指南--从语法革新到云原生，解锁企业级开发新范式

🚀 技术升级背景随着 JDK 17（LTS） 与 Spring Boot 3 的发布，Java 生态迎来性能与开发效率的双重飞跃。相较于 JDK 8，JDK 17 在语法、API、GC 等方面均有显著优化，而 Spring Boot 3 则全面拥抱 Jakarta EE…...

编程日记 2025/6/28 4:16:19

phpStorm2021.3.3在windows系统上配置Xdebug调试

开始首先根据PHP的版本下载并安装对应的Xdebug扩展在phpStorm工具中找到设置添加服务添加php web page配置完信息后首先根据PHP的版本下载并安装对应的Xdebug扩展我使用的是phpStudy工具，直接在php对应的版本中开启xdebug扩展， 并在php.ini中添加如下…...

编程日记 2025/6/28 6:35:04

DFS/BFS简介以及剪枝技巧

DFS简介 DFS含义 ⭐ DFS，即Depth-first-search，是深度优先搜索的简称。它的主要思路是一直沿当前分支搜索，当搜索到尽头之后返回，再逐步向其他地方扩散。我们可以通过一个树形结构说明DFS的遍历顺序 A/ | \B C D/ \ |E…...

编程日记 2025/6/27 5:58:21

LeetCode[15]三数之和

思路： 一开始我想的用哈希表来做，但是怎么想怎么麻烦，最后看解析，发现人家用的双指针，那我来讲一下我这道题理解的双指针。这道题使用双指针之前一定要给数组进行排序，ok为什么排序？因为我需要…...

编程日记 2025/6/28 5:09:54

高性能计算面经

高性能计算面经 C八股文真景一面凉经自我介绍，介绍一下你做过的加速的模块(叠噪，噪声跟原图有什么关系？)OpenGL和OpenCL有什么区别？**1. 核心用途****2. 编程模型****3. 硬件抽象****4. API设计****5. 典型应用场景****6. 互操作性…...

编程日记 2025/6/28 4:00:21

HTML 标签类型全面介绍

HTML 标签类型全面介绍 HTML（HyperText Markup Language）是构建 Web 页面结构的基础语言。HTML 由不同类型的标签组成，每种标签都有特定的用途。本文将全面介绍 HTML 标签的分类及其用法。 1. HTML 标签概述 HTML 标签通常成对出现&#xf…...

编程日记 2025/6/28 5:06:17

【漫话机器学习系列】168.最大最小值缩放（Min-Max Scaling）

在机器学习和数据预处理中，特征缩放（Feature Scaling） 是一个至关重要的步骤，它可以使模型更稳定，提高训练速度，并优化收敛效果。最大最小值缩放（Min-Max Scaling） 是其中最常见的方…...

编程日记 2025/6/28 4:53:05

Spring Boot中对同一接口定义多个切面的示例，分别通过接口方式和注解方式实现切面排序，并对比差异

以下是Spring Boot中对同一接口定义多个切面的示例，分别通过接口方式和注解方式实现切面排序，并对比差异： 一、接口方式实现切面排序 1. 定义接口 // 服务接口 public interface MyService {void methodA();void methodB(); }// 接口实现类…...

编程日记 2025/6/28 6:58:59

基于SpringBoot的高校学术交流平台

作者：计算机学姐开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。专栏推荐：前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码精品专栏：…...

编程日记 2025/6/28 5:04:40

数据治理的专题库

数据治理专题库的全面解析一、专题库的定义与定位数据治理专题库是围绕特定业务领域或场景构建的专业化数据库，其核心在于业务导向性和自主性。与基础库（如人口、法人、地理信息等跨部门核心实体数据）和主题库（如市场监管中的…...

编程日记 2025/6/28 7:09:41

相关文章：