【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>

感谢阅读,谢谢,加油。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/837972.shtml

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

相关文章

计算机视觉中的计算几何

计算几何领域出现于 20 世纪 70 年代&#xff0c;研究解决几何问题的数据结构和算法。这尤其包括确定图像内的拓扑结构&#xff0c;或者实际上是更高维的表示&#xff0c;例如点邻域&#xff0c;这可以帮助从数字图像数据等中导出几何意义[1]。 计算机视觉主要涉及静态或动态图…

JAVA实验项目(一):JAVA面向对象特征性实验

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…

C++ | string详解

1、string是什么 string是STL文档的容器之一&#xff0c;是一个自定义类型&#xff0c;是一个类&#xff0c;由类模板basic_string实例化出来的一个类&#xff1b; 类模板basic_string实例化出来了四个类&#xff0c;如下图所示&#xff1b; 实例化出的这四个类不同的是他们的编…

【Qt】修改Qt软件名称

修改Qt软件名称 在main.cpp中做如下修改 #include "mainwindow.h"#include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);MainWindow w;//软件名称w.setWindowTitle(QObject::tr("新的软件名称"));w.show();retur…

HI-TOP网关HT3S-DCS-MDN在半导体生产线中的RS232温控器与DeviceNet主机台通讯整合应用案例

一、项目背景 在半导体生产线的温度控制环节中&#xff0c;传统的RS232温控器因其稳定的性能和广泛的应用而占据重要地位&#xff0c;然而&#xff0c;由于不同设备厂商使用的通讯协议和标准各异&#xff0c;导致设备间的信息交换存在障碍。温控器的精确控制、设备的互联互通和…

YOLOv8独家改进:逐元素乘法(star operation)二次创新 | 微软新作StarNet:超强轻量级Backbone CVPR 2024

💡💡💡创新点:star operation(元素乘法)在无需加宽网络下,将输入映射到高维非线性特征空间的能力,逐元素乘法(star operation)在性能上始终优于求和,基于star operation块做二次创新 💡💡💡如何跟YOLOv8结合:替代YOLOv8的C2f,结构图如下 收录 YOLOv8…

PyQt5编写的一个简易图像处理软件

文章目录 1. 简介2. 准备工作3. 主界面设计4. 功能构建5. 总结 1. 简介 通过编写简易图像处理软件&#xff0c;你可以学习如何使用 PyQt5 构建用户界面&#xff0c;以及如何与用户交互。同时&#xff0c;你还可以学习图像处理技术&#xff0c;如图像读取、傅里叶变换、滤波、增…

找到出现了K次的数

描述 一个数组中有一种数出现了K次&#xff0c;其他数都出现了M次&#xff0c;M>1 ,K<M 找到出现了K次的数 时间复杂度O1 空间复杂度O1(不能用hash表) 就是说给一个数组arr[] 给两个数字3&#xff0c; 7 其中3和7 就是K和M 这个数组中 有一种数出现了3次&#xff0c…

C# winform opencvsharp 识别轮廓。拟合,找到中心点

在C# WinForms项目中使用OpenCvSharp来识别图像中的轮廓并对其进行拟合以找到中心点&#xff0c;你可以遵循以下步骤&#xff1a; 准备工作 安装OpenCvSharp&#xff1a;确保你的项目中已经通过NuGet包管理器安装了OpenCvSharp4&#xff08;或相应的版本&#xff09;。 导入命…

Ansible自动化运维中的User用户管理模块应用详解

作者主页&#xff1a;点击&#xff01; Ansible专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年5月14日14点12分 在Ansible中&#xff0c;user 模块主要用于管理系统用户账户。它可以创建、修改、删除用户&#xff0c;并管理用户的属性&#xff0c;比如密码、…

玩机进阶教程------MTK机型重置账号 去除FRP 去除开机密码 清除数据的几种方法步骤解析

目前的机型不管是高通芯片还是MTK芯片。都有账号类限制。包含云账号 frp账号和开机密码等等,他们在线刷包中对应的分区是不同的。例如针对开机图案密码这些,有些机型靠简单的恢复出厂是无效果的,其实对应的解决方法很简单。今天将针对MTK芯片机型的账号问题做个步骤解析。 …

Selenium 自动化 —— 四种等待(wait)机制

更多关于Selenium的知识请访问CSND论坛“兰亭序咖啡”的专栏&#xff1a;专栏《Selenium 从入门到精通》 ​ 目录 目录 需要等待的场景 自己实现等待逻辑 Selenium 提供的三种等待机制 隐式等待&#xff08;Implicit Waits&#xff09; 隐式等待的优点 隐式等待的缺点 …

pycharm如何有效读取到win10设置的环境变量

参考链接&#xff1a; 参考文章 该参考文章的第一种方法&#xff1a;设置win10环境变量。 在设置完环境变量后&#xff0c;在pycharm终端上不能有效读取到刚刚设置的环境变量的&#xff0c;需要启动win的cmd&#xff0c;在项目路径下执行脚本。如下所示的对比&#xff1a; cm…

金航标kinghelm萨科微slkor公司发展和品牌传播

为了金航标kinghelm萨科微slkor公司发展和品牌传播&#xff0c;推出了”金航标每日芯闻“与“萨科微每日芯闻“栏目&#xff0c;影响力非常好。这一构想并非一时的灵光乍现&#xff0c;而是经过深思熟虑和充分调研的结果。制定该栏目的模板时候时&#xff0c;就明确了要求语音版…

棒材直线度测量仪 专为圆形产品研发设计 在线无损检测

棒材直线度测量仪采用了先进的技术&#xff0c;能够实现在线无损检测&#xff0c;为生产过程提供了极大的便利。专为圆形产品设计&#xff0c;它能够精确测量棒材的米直线度及外径、椭圆度尺寸&#xff0c;为质量控制提供可靠的数据支持。 在线直线度测量仪不仅具有出色的性能…

Python中读取和写入文件的例子

下面是一个Python中读取和写入文件的完整例子&#xff0c;包括了打开文件、读取内容、写入内容以及关闭文件的基本步骤。此外&#xff0c;还会展示如何使用with语句来自动管理资源。 ### 示例&#xff1a;读取文件 假设我们有一个名为sample.txt的文本文件&#xff0c;其内容…

数据架构简介

概念定义 数据架构是一套规则、政策、标准和模型&#xff0c;用于管理和定义收集的数据类型&#xff0c;以及如何在组织及其数据库中使用、存储、管理和集成数据。 数据架构是实现数据规划的载体&#xff0c;是揭示业务本质、描述企业中数据关系的全景视图&#xff0c;是统一数…

Web前端开发 - 4 - CSS3动画

CSS3动画 一、 设计2D变换二、 设计3D变换三、 设计过渡动画四、设计帧动画 一、 设计2D变换 transform : none | <transform-function> /* <transform-function> 设置变换函数&#xff0c;可以是一个或多个变换函数列表。函数包括: martrix(x缩放,x倾斜,y倾斜,y…

刷代码随想录有感(66):回溯算法——组合问题的优化(剪枝)

代码&#xff1a;将for循环中i的搜索范围进行缩小&#xff0c;免去多余的不可能符合条件的操作。 for(int i start; i < n-(k-tmp.size())1;i) 实质是剪枝&#xff0c;拿n4,k4作比较&#xff1a; 显然结果只可能是[1,2,3,4]&#xff0c;选取顺序只可能是1-2-3-4&#xff…

c#多态性的应用

设计一个电脑游戏&#xff0c;游戏中有猪、牛、兔子、青蛙、鸭子等动物&#xff0c;这些动 物都继承于Vertebrata 类&#xff08;脊椎动物类&#xff09;&#xff0c;Vertebrata类有一个抽象方法Display()&#xff0c;每个动 物都从Vertebrata 类那里继承并重写了Display()方法…