Vue3多语言实现

1.首先安装i18n 

npm install vue-i18n

2.在项目下创建lang目录并创建en.ts,i18n1.ts,zh.ts

en.ts 

export default {message: {home: 'home',appTitle:'aa 3D Smart Measure'},    Menus: {Measuer: 'Measure',},GlueMeasure: {Title: 'Camera 3D Glue Measure',}}

zh.ts

export default {message: {home: 'home',appTitle:'aa 3D智能测量'},    Menus: {Measuer: '测量',}, GlueMeasure: {Title: '3D相机 涂胶测量',}}

i18n1.ts

import { createI18n } from "vue-i18n";
import en from './en'
import zh from './zh';const i18n = createI18n({locale:localStorage.getItem('language') || 'zh', // 默认是中文fallbackLocale: 'zh',globalInjection:true,//全局配置$tlegacy:false,messages:{en,zh}// 需要做国际化的语种})export default i18n 

3.在main.ts中配置

import i18n from './lang/i18n1'app.use(i18n)

4.在标签中使用 {{ $t('message.appTitle') }}

			<el-text class="mx-1" type="info"><span style="color: white;font-size: xx-large;">{{ $t('message.appTitle') }}</span></el-text>

5.在代码中使用方法 t("Menus.Measuer")

<script setup lang="ts">
import { computed } from 'vue';
import { useSidebarStore } from '../store/sidebar';
import { useRoute } from 'vue-router';
import i18n from '../lang/i18n1';const t = i18n.global.tconst items = [{icon: 'CameraFilled',index: '1',title: t("Menus.Measuer"), permiss: '4',subs: [{index: '/SystemLog',title: 'Log',permiss: '17',},

6.实现语言切换

				<el-dropdown class="user-name" trigger="click" @command="LanguageCommand"><span class="el-dropdown-link">{{ CurrentLanguage }}<el-icon class="el-icon--right"><arrow-down /></el-icon></span><template #dropdown><el-dropdown-menu> <el-dropdown-item command="zh">中文</el-dropdown-item><el-dropdown-item divided command="en">English</el-dropdown-item> </el-dropdown-menu> </template></el-dropdown>const LanguageCommand = (command: string) => {console.log(command)localStorage.removeItem('language')localStorage.setItem('language', command)window.location.reload()switch (command) {case 'zh':CurrentLanguage.value = "中文"break;case 'en':CurrentLanguage.value = "English"break;}
};

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

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

相关文章

android(安卓)最简单明了解释版本控制之MinSdkVersion、CompileSdkVersion、TargetSdkVersion

1、先明白几个概念 &#xff08;1&#xff09;平台版本&#xff08;Android SDK版本号&#xff09; 平台版本也就是我们平时说的安卓8、安卓9、安卓10 &#xff08;2&#xff09;API级别&#xff08;API Level&#xff09; Android 平台提供的框架 API 被称作“API 级别” …

什么是CAN的BUS-OFF,如何恢复BUS-OFF?

CAN作为一款强大的工业总线&#xff0c;其高性能和高可靠性让其应用特别广泛。一个小知识&#xff1a;汽车里面各个模块之间的通讯就是使用CAN来实现的哦。 既然是总线&#xff0c;那当然会有多个设备挂载在CAN上&#xff0c;当一个设备在发送数据的时候&#xff0c;其他设备也…

基于STC8H4K64TL单片机的RTC(即实时时钟)功能调试

基于STC8H4K64TL单片机的RTC(即实时时钟)功能调试 STC8H4K64TL单片机介绍STC8H4K64TL单片机管脚图(48个引脚)STC8H4K64TL单片机串口仿真与串口通信STC8H4K64TL单片机管脚图(32个引脚)STC8H4K64TL单片机管脚图(20个引脚)STC8H系列单片机管脚说明STC8H系列单片机I/O口STC…

大模型不会比大小和单词字母计数?日期计算也是一片混乱

9.9和9.11哪个大&#xff1f;13.8%和13.11%谁大谁小&#xff1f;这两个比大小的问题&#xff0c;前段时间难倒众多大模型&#xff0c;在网上掀起热议。 除此之外&#xff0c;向大模型提问“草莓&#xff08;strawberry&#xff09;这个单词有几个r时”&#xff0c;多家主流大模…

三目操作符

双目操作符有、-、*、/、% 单目操作符有--、、、- 三目操作符有表达式1&#xff1f;表达式2&#xff1a;表达式3 如果表达式1为真则表达式2计算否则表达式3计算&#xff0c;计算结果为整个表达式的结果 #include<stdio.h> int main() {int a 0;int b 0;scanf(&quo…

Doris-计算特性

1 全新优化器 1.1 如何开启1.2 统计信息 1.2.1 使用ANALYZE语句手动收集1.2.1 自动收集1.2.3 作业管理1.3 会话变量及配置项调优参数2 Join相关 2.1 支持的Join算子2.2 支持的shuffle方式 2.2.1 Broadcast Join2.2.2 Shuffle Join2.2.3 Bucket Shuffle Join 2.2.3.1 原理2.2.3.…

PHP反序列化漏洞从入门到深入8k图文介绍,以及phar伪协议的利用

文章参考&#xff1a;w肝了两天&#xff01;PHP反序列化漏洞从入门到深入8k图文介绍&#xff0c;以及phar伪协议的利用 前言 本文内容主要分为三个部分&#xff1a;原理详解、漏洞练习和防御方法。这是一篇针对PHP反序列化入门者的手把手教学文章&#xff0c;特别适合刚接触PH…

Windows搭建我的世界MC服务器 【Minecraft外网联机教程】

目录 ⛳️推荐 1. 搭建我的世界服务器 1.1 服务器安装java环境 1.2 配置服务端 1.3 创建我的世界服务器 2. 局域网联机测试 3. 安装cpolar内网穿透 4. 公网联机Minecraft 5. 配置固定远程联机端口地址 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通…

新手转行AI运营岗位,轻松实现月入15K+

近年来人工智能大爆发&#xff0c;各种AI产品层出不穷&#xff0c;市场也出现了一批高薪AI运营类岗位 不需要技术背景、门槛低&#xff0c;即便是新手&#xff0c;也有机会拿下offer。如果你计划今年跳槽或转行运营&#xff0c;这5个岗位不妨试试&#xff08;结尾附国内AI公司清…

科普文:万字梳理高性能 Kafka快的8个原因

概叙 科普文&#xff1a;万字详解Kafka基本原理和应用-CSDN博客 科普文&#xff1a;万字梳理31个Kafka问题-CSDN博客 我们都知道 Kafka 是基于磁盘进行存储的&#xff0c;但 Kafka 官方又称其具有高性能、高吞吐、低延时的特点&#xff0c;其吞吐量动辄几十上百万。 在座的…

【深度学习】kaggle使用

https://blog.csdn.net/2301_78630677/article/details/133834096 https://blog.csdn.net/xiaojia1001/article/details/139467176 https://www.kaggle.com/ 使用要挂代理&#xff0c;要不然可能无法注册 绑定手机号之后才能使用GPU 每周30h免费GPU使用时长 上传数据集 Ad…

安科瑞ACTB系列电流互感器过电压保护器

产品概述&#xff1a; 安科瑞ACTB系列电流互感器过电压保护器是一种重要的电力保护设备&#xff0c;‌主要用于防止电流互感器在运行中因二次绕组开路或一次绕组流过异常电流而在二次侧产生的高压过电压。‌这种保护器能有效防止因电流互感器二次侧异常高压引起的事故&#xf…

手撕数据结构---栈和队列的概念以及实现

栈的概念&#xff1a; 栈&#xff1a;⼀种特殊的线性表&#xff0c;其只允许在固定的⼀端进⾏插⼊和删除元素操作。进⾏数据插⼊和删除操作的⼀端称为栈顶&#xff0c;另⼀端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈…

opencascade AIS_RubberBand AIS_RotationMode源码学习

//!相机旋转类型 Camera rotation mode. enum AIS_RotationMode { AIS_RotationMode_BndBoxActive, //!< default OCCT rotation AIS_RotationMode_PickLast, //!< rotate around last picked point AIS_RotationMode_PickCenter, //!< rotate around point at the ce…

python之代码简化式(列表、字典生成式,递归函数,迭代器(iter)和生成器(yield)、匿名函数(lambda)的使用)(12)

文章目录 前言1、列表、字典生成式2、递归函数2.1 python中代码的递归深度&#xff08;扩展&#xff09; 3、拓展&#xff1a;迭代器和生成器3.1 迭代器&#xff08;iter&#xff09;3.2 生成器&#xff08;yield&#xff09; 4、匿名函数&#xff08;lambda&#xff09;4.1 ma…

宠物猫用空气净化器真的有用吗?值得买的猫用空气净化器牌子排名

作为一名6年资深铲屎官&#xff0c;每天铲猫砂盆的工作无疑是一项挑战。家中不仅弥漫着难以忍受的气味&#xff0c;而且家里的小孩和老人偶尔会因为过敏性鼻炎或结膜炎等问题感到不适。换毛季节尤其头疼&#xff0c;浮毛无处不在&#xff1a;沙发、外套、坐垫&#xff0c;甚至连…

Spring Boot 3 + Resilience4j 简单入门 + Redis Cache 整合

1. 项目结构 2. Maven依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.1.2</version><relativePath/> <!-- lookup parent from repository --&…

如何学习ClickHouse:糙快猛的大数据之路(技术要点概览)

这个系列文章用"粗快猛大模型问答讲故事"的创新学习方法&#xff0c;让你轻松理解复杂知识&#xff01;涵盖Hadoop、Spark、MySQL、Flink、Clickhouse、Hive、Presto等大数据所有热门技术栈&#xff0c;每篇万字长文。时间紧&#xff1f;只看开头20%就能有收获&#…

如何智能便捷、自动化地进行文件数据采集?

文件数据采集是指从各种源头和渠道收集、整理、清洗、分析和挖掘数据的过程。它是大数据应用的基础&#xff0c;为企业提供全面的决策支持和业务价值。文件数据采集对于不同行业都至关重要&#xff0c;通过有效的文件数据采集&#xff0c;企业可以更好地了解市场动态、优化服务…

数据驱动未来:构建下一代湖仓一体电商数据分析平台,引领实时商业智能革命

1.1 项目背景 本项目是一个创新的湖仓一体实时电商数据分析平台&#xff0c;旨在为电商平台提供深度的数据洞察和业务分析。技术层面&#xff0c;项目涵盖了从基础架构搭建到大数据技术组件的集成&#xff0c;采用了湖仓一体的设计理念&#xff0c;实现了数据仓库与数据湖的有…