【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的叫教程,适用于企业前端项目。 添加依赖 依赖 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存储(20240508)1 上期示例说明2 两个参数2.1 NEST/UNNEST2.2 CHECK/NOCHECK 3 一数多用3.1 以用户维度输出订单信息3.2 以产品维度3.3 以产品种类维度 4 美化输出总结 数…...
7 zip 介绍
7-Zip是一款广受好评的开源文件存档与压缩工具,支持高比率的压缩,适用于Windows、Linux和macOS等多种操作系统平台。以下是关于7-Zip的详细介绍: - **高压缩比**:7-Zip最显著的特点是其提供的高压缩率,尤其是使用其独…...
前端页面 贴边拖拽 盒子
vue 悬浮球(带自动吸附功能)_vue悬浮球-CSDN博客...
【408真题】2009-10
“接”是针对题目进行必要的分析,比较简略; “化”是对题目中所涉及到的知识点进行详细解释; “发”是对此题型的解题套路总结,并结合历年真题或者典型例题进行运用。 涉及到的知识全部来源于王道各科教材(2025版&…...
WebSocket概述
TCP和HTTP规范有连接超时一说,所以长轮询并不能一直持续,服务端和客户端的连接需要定期的连接和关闭再连接。 WebSocket在请求头中有一个Connection:Upgrade字段,表示客户端想对协议进行升级,还有一个Upgrade:websocket字段&…...
人机协同是虚拟与真实的协同
“人机协同”是指人类与机器之间的合作与协同工作。在这种协同中,机器可以作为助手、辅助或扩展人类的能力,帮助人们完成任务,提高工作效率和质量。 虚拟与真实的协同是指在人机协同的过程中,虚拟想象世界和真实世界之间的协同。通…...
【编程向导】Docker-常用命令
常用命令 管理命令 管理命令说明builder管理构建config管理配置container管理容器context管理上下文engine管理引擎image管理镜像network管理网络node管理 Swarm 节点plugin管理插件secret管理 Docker secretsservice管理服务stack管理 Docker stacksswarm管理 Swarm 集群sys…...
LeetCode题练习与总结:不同的二叉搜索树Ⅱ--95
一、题目描述 给你一个整数 n ,请你生成并返回所有由 n 个节点组成且节点值从 1 到 n 互不相同的不同 二叉搜索树 。可以按 任意顺序 返回答案。 示例 1: 输入:n 3 输出:[[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)来声明项目设置,也增加了基于Kotlin语言的kotlin-based DSL,抛弃了基于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”。 主要对多模态大语言模型(MLLM)在自动驾驶领域的应用进行了审视,并挑战/验证了一些常见的假设,重点关注它们通过图像/帧序列推理和解释在闭环控制环境…...
掌握Vim:Linux系统维护的瑞士军刀 - 常用命令深度解析
在Linux的世界里,Vim编辑器犹如一位沉默的剑客,它的命令就是那锋利的剑刃,能够在代码的海洋中劈波斩浪。对于每一位Linux系统用户来说,掌握Vim的常用命令,就如同获得了维护系统的瑞士军刀。今天,让我们一起…...
C++数组和指针应用实例 -- 实现计算器
C 的数组和C 语言一样,C完全兼容C语言的指针,但是会多出一个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. 分支做了保护,git中设置允许强制推送...
springBoot实现发送邮箱验证码 redis缓存源码
要在Spring Boot中实现发送邮箱验证码并使用Redis进行缓存,你需要遵循几个步骤。以下是一个简化的示例,展示了如何整合这些功能: 添加依赖 首先,确保你的pom.xml(Maven)或build.gradle(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勒索病毒如何应对?数据能够恢复吗?
导言: 在数字化时代的浪潮中,网络安全问题如同暗流涌动,威胁着每一个互联网用户的安宁。而近年来,一种名为.360勒索病毒的新型网络威胁逐渐浮出水面,以其独特的加密方式和狡猾的传播策略,给全球网络安全带…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统,支持多语言对话(如 中文,英文,日语),语音情感(如 开心,悲伤)&#x…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
加密通信 + 行为分析:运营商行业安全防御体系重构
在数字经济蓬勃发展的时代,运营商作为信息通信网络的核心枢纽,承载着海量用户数据与关键业务传输,其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级,传统安全防护体系逐渐暴露出局限性&a…...
篇章一 论坛系统——前置知识
目录 1.软件开发 1.1 软件的生命周期 1.2 面向对象 1.3 CS、BS架构 1.CS架构编辑 2.BS架构 1.4 软件需求 1.需求分类 2.需求获取 1.5 需求分析 1. 工作内容 1.6 面向对象分析 1.OOA的任务 2.统一建模语言UML 3. 用例模型 3.1 用例图的元素 3.2 建立用例模型 …...
