Vite+Vue3使用Vue-i18n笔记

一、下载依赖 vue-i18n

在这里插入图片描述

yarn add vue-i18n

创建存放语言文件的目录 以及配置文件的配置

我是在src/lang 新建index.ts、cn.ts、en.ts以及test文件夹其中再分别新建cn.ts以及en.ts

/lang/index.ts 用于导出vue-i18n需要的配置对象

import en from "./en.ts";
import zh from "./cn.ts";const messages = {en,zh,
};
const language = (
// 读取本地浏览器语言环境中文 zh-CN 英文 eng(navigator.language ? navigator.language : navigator.userLanguage) || "zh"
).toLowerCase();
export default {fallbackLocale: "zh",legacy: false, // composition APIglobalInjection: true, //全局生效$tlocale: language.split("-")[0] || "zh", // 默认zh翻译messages,
};

/src/lang/en.ts 以及同目录下的cn.ts用于收集模块的语言文件并统一提供给Index.ts导出

import test from "./test/en";
export default {test,
};

/src/lang/cn.ts 以及同目录下的en.ts用于收集模块的语言文件并统一提供给Index.ts导出

import test from "./test/cn";
export default {test,
};

/src/lang/test/cn.ts

export default {h1Title: "这是一个测试文本"}

/src/lang/test/en.ts

export default {h1Title: "This is a test text"}

main.ts中需要对vue-i18n进行引入并使用

import { createApp } from "vue";//必须的依赖
import App from "./App.vue";//必须的依赖
iimport i18nOptionsObj from "./lang/index"; // 1导入vue-i18需要的配置对象
import { createI18n } from "vue-i18n"; // 2 导入创建实例的钩子函数
const app = createApp(App); //必须的依赖const i18n = createI18n(i18nOptionsObj);// 3.根据配置对象创建实例
app.use(i18n);// 4.挂在到Vue身上
app.config.globalProperties.$t = i18n.global.t;// 5.全局挂载$t翻译方法
app.mount("#app");//必须的步骤

组件中使用

模板使用

<template>
<h1>
{{$t("test.h1Title")}}
中文环境====>这是一个测试文本
英文环境====>This is a test text
</h1>
</template>

js中使用

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
console.log(t("test.h1Title"))
//中文环境输出====>这是一个测试文本
//英文环境输出====>This is a test text
<script>

混合

<script lang="ts" setup>
import {ref} from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const titleMsg1 = ref(t("test.h1Title")) 
const titleMsg2  = ref("test.h1Title") 
<script>
<template>
{{titleMsg1}}
{{$t(titleMsg2)}}
</template>

语言环境切换

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
locale.value = 'zh' || 'en'

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

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

相关文章

题记(30)--排名

目录 一、题目内容 二、输入描述 三、输出描述 四、输入输出示例 五、完整C语言代码 一、题目内容 今天的上机考试虽然有实时的Ranklist&#xff0c;但上面的排名只是根据完成的题数排序&#xff0c;没有考虑每题的分值&#xff0c;所以并不是最后的排名。给定录取分数线&…

MySQL的原生API实现插入数据后在可视化工具上不显示的问题解决

显示表中有两行数据&#xff0c;该表也设置了主键和唯一索引 点进表里看却没有数据 问题原因出现在这里&#xff0c;虽然很多常用的数据库连接池都会开启自动提交&#xff0c;但ibatis的SqlSession使用sessionFactory.openSession()创建时&#xff0c;默认的自动提交是false&am…

com.alicp.jetcache.support.CacheEncodeException: Java Encode error 报错解决

目录 一、报错截图&#xff1a;二、报错原因三、解决方式 一、报错截图&#xff1a; Spring boot 整合 JetCache 使用Cached。报错如下&#xff1a; 二、报错原因 带有Cached注解的方法返回值对象没有实现序列化接口&#xff0c;如下图所示 三、解决方式 带有Cached注解的…

GP232RL国产USB串口如何兼容FT232RL开发资料

GP232RL是最新加入 ftdi 系列 usb 接口集成电路设备的设备。 232r是一个 usb 到串行 uart 接口&#xff0c;带有可选的时钟发生器输出&#xff0c;以及新的 ftdichip-idTM 安全加密器特性。此外&#xff0c;还提供了异步和同步位崩接口模式。 通过将外部 eeprom、时钟电路和 …

MySQL事务和锁07

官网地址&#xff1a;MySQL :: MySQL 5.7 Reference Manual :: 13.3.7.1 XA Transaction SQL Statements 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. Mysql5.7参考手册 / ... / XA事务SQL语句 13.3.7.1A事…

基础知识总结

概念概述 计算机网络是通过传输介质、通信设施和网络通信协议&#xff0c;把分散在不同地点的计算机设备互连起来&#xff0c;实现资源共享和数据传输的系统。而网络编程就是编写程序使联网的两个或多个设备&#xff08;比如计算机&#xff09;之间进行数据传输。Java语言对网…

MATLAB R2023B下载安装教程,免费使用,附安装包和工具,操作简单,小白也能轻松搞定

前言 MATLAB是一款商业数学软件&#xff0c;用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境&#xff0c;主要包括MATLAB和Simulink两大部分&#xff0c;可以进行矩阵运算、绘制函数和数据、实现算法、创建用户界面、连接其他编程语言的程序等…

【正则表达式】获取html代码文本内所有<script>标签内容

文章目录 一. 背景二. 思路与过程1. 正则表达式中需要限定<script>开头与结尾2. 增加标签格式的限定3. 不限制<script>首尾的内部内容4. 中间的内容不能出现闭合的情况 三. 结果与代码四. 正则辅助工具 一. 背景 之前要对学生提交的html代码进行检查&#xff0c;在…

基于springboot招生管理系统源码和论文

在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括招生管理系统的网络应用&#xff0c;在外国招生管理系统已经是很普遍的方式&#xff0c;不过国内的管理网站可能还处于起步阶段。招生管理系统具有招生公告信息管理功能的选择…

2024-01-30(Hadoop_HDFS)

1.什么是大数据 狭义&#xff08;技术思维&#xff09;&#xff1a;使用分布式技术完成海量数据的处理&#xff0c;得到数据背后蕴含的价值。 广义&#xff1a;大数据是数字化时代&#xff0c;信息化时代的基础&#xff08;技术&#xff09;支撑&#xff0c;以数据为生活赋能…

win wsl2 Ubuntu-22.04 设置时间为国内时间

使用 wsl2 安装 Ubuntu-22.04 后 时间不正确&#xff0c;主要有两个原因 时区设置不正确&#xff0c;国内为京八区。 时区正确后&#xff0c;没有同步时间。&#xff08;大部分人容易忽略这一点&#xff09; Linux 默认情况下使用 UTC 格式作为标准时间格式&#xff0c;如果在…

双创竞赛项目申报:Java + Spring Boot的实战指南

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

DFS(指数型枚举)

从 1∼n 这 n 个整数中随机选取任意多个&#xff0c;输出所有可能的选择方案。 输入格式 输入一个整数 n。 输出格式 每行输出一种方案。 同一行内的数必须升序排列&#xff0c;相邻两个数用恰好 11 个空格隔开。 对于没有选任何数的方案&#xff0c;输出空行。 本题有自定义校…

单片机学习笔记---静态数码管显示

目录 数码管是什么&#xff1f; 一位数码管的引脚定义 四位一体的数码管引脚定义 数码管的原理图解析 数码管怎么显示数据&#xff1f;&#xff08;总结代码显示&#xff09; 今天开始学习数码管&#xff0c;它比LED和独立按键复杂一点 数码管是什么&#xff1f; LED数码…

如何获取到小程序appId

一、申请测试号 直接访问这个链接微信扫一下 微信公众平台 然后再去微信公众平台登录&#xff0c;账号的选择中就会多一个微信小程序测试号 选择登录即可获取到appid 二、注册一个微信小程序 第二种方式&#xff0c;去微信公众平台注册一个小程序。 注册完成后&#xff0c;…

ARM汇编 4.GNU伪指令、内联汇编

汇编伪指令格式 标号symbol&#xff08;label&#xff09; 注释符号&#xff1a; 整行注释&#xff1a;# 语句分离&#xff1a;&#xff1b; 立即数前缀&#xff1a;# 或 $ 分段&#xff1a;.section伪操作&#xff0c;用于自定义新的段 .text&#xff1a;代码段.data&am…

MP4格式视频怎么提取gif?一招教你在线做

MP4是一种常见的数字多媒体容器格式&#xff0c;它是一种使用最广泛的视频文件格式之一。MP4文件可以包含音频、视频和字幕等多种媒体数据&#xff0c;并且可以通过各种播放器和设备进行播放和共享。它是一种压缩格式&#xff0c;可以在保持相对较小文件大小的同时提供较高的视…

Java 的 Map 與 List

通過重新new 一個ArrayList 轉化 resTask.setList(new ArrayList<Group>(custMap.values())); 无序的Map List 有序的数据放到Map&#xff0c;就变成无序。 List排序 按照code 的字母进行排序A-Z resTask.getListData().sort(Comparator.comparing(Gmer::getCode));…

【vue】前后端不在同一网络下,前端解决跨域

前端解决跨域 1、vue.config.js中配置devServer devServer: {proxy: {"/api": {target: "http://xxx:端口", // 将请求代理到后端的地址changeOrigin: true,pathRewrite: {"^/api": "", // 如果后端接口不包含 /api 前缀&#xff0c;…

spring框架(一)

1、Spring框架&#xff1a;IoC和AOP 服务端三层开发&#xff1a;表现层、业务层、持久层 ssm, springboot, springcloud(微服务&#xff0c;治理组件) Spring框架是一个流行的Java应用程序框架&#xff0c;它提供了许多功能来简化企业级应用程序的开发。其中&#xff0c;控制反…