当前位置: 首页 > 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;给全球网络安全带…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

【C++】纯虚函数类外可以写实现吗?

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

13.10 LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析

LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析 LanguageMentor 对话式训练系统架构与实现 关键词:多轮对话系统设计、场景化提示工程、情感识别优化、LangGraph 状态管理、Ollama 私有化部署 1. 对话训练系统技术架构 采用四层架构实现高扩展性的对话训练…...