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

【nuxt3国际化i18n】vue3+nuxt3+vite+TS国际化的正确做法

1、创建nuxt3请看Nuxt3官网

2、下面是添加i18n的叫教程,适用于企业前端项目。

添加依赖
依赖

yarn add vue-i18n 
yarn add @nuxtjs/i18n@next -D

配置文件nuxt.config.ts

//nuxt.config.ts
export default defineNuxtConfig({modules: ['@nuxtjs/i18n',],i18n: {strategy: 'no_prefix', // 添加路由前缀的方式locales: ["en","zh"], //配置语种defaultLocale: 'zh', // 默认语种vueI18n: './i18n/config.ts', // 通过vueI18n配置},})

i18n配置

import en from "assets/lang/en_us.json";
import zh from "assets/lang/zh_cn.json";
export default defineI18nConfig(() => ({legacy: false,  // 是否兼容之前fallbackLocale: 'en',  // 区配不到的语言就用enmessages: {en,zh}
}))

en_us.json

{"welcome": "hello","messages": "world!"
}

zh_cn.json

{"welcome": "你好","messages": "我的世界!"
}

使用

<script setup lang="ts">
import {onMounted} from "vue";const {locale, setLocale} = useI18n()
onMounted(() => {console.log("locale--language", locale.value)
})</script><template><div><v-btn @click="setLocale('en')">英文</v-btn><v-btn @click="setLocale('zh')">中文</v-btn><p>{{ $t('welcome') }}</p><p>{{ $t('messages') }}</p></div>
</template><style scoped></style>

感谢阅读,谢谢,加油。

相关文章:

【nuxt3国际化i18n】vue3+nuxt3+vite+TS国际化的正确做法

1、创建nuxt3请看Nuxt3官网 2、下面是添加i18n的叫教程&#xff0c;适用于企业前端项目。 添加依赖 依赖 yarn add vue-i18n yarn add nuxtjs/i18nnext -D配置文件nuxt.config.ts //nuxt.config.ts export default defineNuxtConfig({modules: [nuxtjs/i18n,],i18n: {stra…...

数据库管理-第185期 23ai:一套关系型数据干掉多套JSON存储(20240508)

数据库管理185期 2024-05-08 数据库管理-第185期 23ai:一套关系型数据干掉多套JSON存储&#xff08;20240508&#xff09;1 上期示例说明2 两个参数2.1 NEST/UNNEST2.2 CHECK/NOCHECK 3 一数多用3.1 以用户维度输出订单信息3.2 以产品维度3.3 以产品种类维度 4 美化输出总结 数…...

7 zip 介绍

7-Zip是一款广受好评的开源文件存档与压缩工具&#xff0c;支持高比率的压缩&#xff0c;适用于Windows、Linux和macOS等多种操作系统平台。以下是关于7-Zip的详细介绍&#xff1a; - **高压缩比**&#xff1a;7-Zip最显著的特点是其提供的高压缩率&#xff0c;尤其是使用其独…...

前端页面 贴边拖拽 盒子

vue 悬浮球(带自动吸附功能)_vue悬浮球-CSDN博客...

【408真题】2009-10

“接”是针对题目进行必要的分析&#xff0c;比较简略&#xff1b; “化”是对题目中所涉及到的知识点进行详细解释&#xff1b; “发”是对此题型的解题套路总结&#xff0c;并结合历年真题或者典型例题进行运用。 涉及到的知识全部来源于王道各科教材&#xff08;2025版&…...

WebSocket概述

TCP和HTTP规范有连接超时一说&#xff0c;所以长轮询并不能一直持续&#xff0c;服务端和客户端的连接需要定期的连接和关闭再连接。 WebSocket在请求头中有一个Connection:Upgrade字段&#xff0c;表示客户端想对协议进行升级&#xff0c;还有一个Upgrade:websocket字段&…...

人机协同是虚拟与真实的协同

“人机协同”是指人类与机器之间的合作与协同工作。在这种协同中&#xff0c;机器可以作为助手、辅助或扩展人类的能力&#xff0c;帮助人们完成任务&#xff0c;提高工作效率和质量。 虚拟与真实的协同是指在人机协同的过程中&#xff0c;虚拟想象世界和真实世界之间的协同。通…...

【编程向导】Docker-常用命令

常用命令 管理命令 管理命令说明builder管理构建config管理配置container管理容器context管理上下文engine管理引擎image管理镜像network管理网络node管理 Swarm 节点plugin管理插件secret管理 Docker secretsservice管理服务stack管理 Docker stacksswarm管理 Swarm 集群sys…...

LeetCode题练习与总结:不同的二叉搜索树Ⅱ--95

一、题目描述 给你一个整数 n &#xff0c;请你生成并返回所有由 n 个节点组成且节点值从 1 到 n 互不相同的不同 二叉搜索树 。可以按 任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,null,2,null,3],[1,null,3,2],[2,1,3],[3,1,null,nul…...

idea SpringBoot + Gradle 环境配置到项目打包

一、前言 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具。它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置&#xff0c;也增加了基于Kotlin语言的kotlin-based DSL&#xff0c;抛弃了基于XML的各种繁琐配置。 面向Java应用为主。当前其支持…...

深入理解tengine的sysguard模块

目录 1. 引言2. 开启sysguard模块2.1 编译2.2 配置3. 源码分析3.1 配置参数分析3.2 模块的初始化3.3 ngx_http_sysguard_handler函数3.4 各项负载指标的获取3.4.1 load系统负载的获取3.4.2 cpu使用率的获取3.4.3 内存使用情况的获取3.3.5 请求平均响应时间的获取1. 引言 Tengin…...

探索多模态LLM作为驾驶的世界模型

24年5月MIT的论文“Probing Multimodal LLMs as World Models for Driving”。 主要对多模态大语言模型&#xff08;MLLM&#xff09;在自动驾驶领域的应用进行了审视&#xff0c;并挑战/验证了一些常见的假设&#xff0c;重点关注它们通过图像/帧序列推理和解释在闭环控制环境…...

掌握Vim:Linux系统维护的瑞士军刀 - 常用命令深度解析

在Linux的世界里&#xff0c;Vim编辑器犹如一位沉默的剑客&#xff0c;它的命令就是那锋利的剑刃&#xff0c;能够在代码的海洋中劈波斩浪。对于每一位Linux系统用户来说&#xff0c;掌握Vim的常用命令&#xff0c;就如同获得了维护系统的瑞士军刀。今天&#xff0c;让我们一起…...

C++数组和指针应用实例 -- 实现计算器

C 的数组和C 语言一样&#xff0c;C完全兼容C语言的指针&#xff0c;但是会多出一个this指针 用C实现计算器 case1: 基本实现: #include <iostream>using namespace std;int add(int a,int b) {return ab; }int minu(int a,int b) {return a-b; }int mul(int a,int b) …...

【多电压流程 Multivoltage Flow】- 5.特定工具使用建议(6.Formality)

使用Formality进行形式验证 Formality支持具有低功耗特性的功能等效性检查,如时钟门控、多阈值电压(multiple-Vt)、多电压供电、电源门控以及动态电压和频率缩放。Formality能够识别低功耗单元,例如隔离单元、电平转换器、始终开启单元、保持寄存器和电源门。 Formality支持…...

力扣 72. 编辑距离 python AC

动态规划 class Solution:def minDistance(self, word1, word2):size1 len(word1)size2 len(word2)dp [[0] * (size2 1) for _ in range(size1 1)]for i in range(1, size1 1):dp[i][0] dp[i - 1][0] 1for i in range(1, size2 1):dp[0][i] dp[0][i - 1] 1for i in…...

vue 发布项目

You are not allowed to force push code to a protected branch on this project. 分支做了保护&#xff0c;git中设置允许强制推送...

springBoot实现发送邮箱验证码 redis缓存源码

要在Spring Boot中实现发送邮箱验证码并使用Redis进行缓存&#xff0c;你需要遵循几个步骤。以下是一个简化的示例&#xff0c;展示了如何整合这些功能&#xff1a; 添加依赖 首先&#xff0c;确保你的pom.xml&#xff08;Maven&#xff09;或build.gradle&#xff08;Gradle…...

QT--4

QT 使用定时器完成闹钟 #include "widget.h" #include "ui_widget.h"void Widget::timestart() {timer.start(1000); }void Widget::timeend() {timer.stop(); }Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(t…...

感染了后缀为.360勒索病毒如何应对?数据能够恢复吗?

导言&#xff1a; 在数字化时代的浪潮中&#xff0c;网络安全问题如同暗流涌动&#xff0c;威胁着每一个互联网用户的安宁。而近年来&#xff0c;一种名为.360勒索病毒的新型网络威胁逐渐浮出水面&#xff0c;以其独特的加密方式和狡猾的传播策略&#xff0c;给全球网络安全带…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...