当前位置: 首页 > news >正文

Vue3国际化多语言的切换

在这里插入图片描述
在这里插入图片描述

参考链接: link

Vue3国际化多语言的切换

一、安装 vue-i18n 和 element-plus

vue-i18n 是一个国际化插件,专为 Vue.js 应用程序设计,用于实现多语言支持。它允许你将应用程序的文本、格式和消息转换为用户的首选语言,从而提供本地化体验。
element-plus可以为我们提供一个下拉框

npm install element-plus vue-i18n@next -S

二、 配置 vue-i18n

1、创建一个i18n的文件夹,在里面配置如下文件结构:
在这里插入图片描述
en.ts是英文语言包,zh.ts是中文语言包,ft.ts是繁体语言包。

2、在index.ts中来配置 vue-i18n:这个index.ts 只需要在main.ts引入就行了。

// 引入i18n
import { createI18n } from "vue-i18n";
import zh from "./zh";
import en from "./en";
import ft from "./ft";
// 语言包
const messages = {zh,en,ft,
};
const i18n = createI18n({legacy: false, //处理报错信息,默认为真locale: "zh", //默认语言messages,
});
export default i18n;

3、配置en.ts,zh.ts,ft.ts。

zs.ts

export default {messages: {loginTitle: "外卖管理系统",switchLanguage: "切换语言",blanketOrder: "总订单",totalSales: "总销售额",orderQuantityToday: "今日订单量",orderSalesToday: "今日销售量",Home: "后台首页",OrderManagement: "订单管理",ProductManagement: "商品管理",ProductList: "商品列表",ProductAdd: "商品添加",ProductCategory: "商品分类",ShopManagement: "店铺管理",AccountManagement: "账号管理",AccountList: "账号列表",AccountAdd: "账号添加",ChangePassword: "修改密码",PersonalCenter: "个人中心",SalesStatistics: "销售统计",ProductStats: "商品统计",OrderStats: "订单统计",ProductCategory: "商品分类",},
};

en.ts

export default {messages: {loginTitle: "Delivery MS",switchLanguage: "Switch Language",blanketOrder: "blanket order",totalSales: "total sales",orderQuantityToday: "Order quantity today",orderSalesToday: "Order sales today",Home: "Background home page",OrderManagement: "Order management",ProductManagement: "Product management",ProductList: "Product list",ProductAdd: "Product add",ShopManagement: "Shop management",AccountManagement: "Account management",AccountList: "Account list",AccountAdd: "Account add",ChangePassword: "Change password",PersonalCenter: "Personal center",SalesStatistics: "Sales statistics",ProductStats: "Product statistics",OrderStats: "Order statistics",ProductCategory: "Product category",},
};

ft.ts

export default {messages: {loginTitle: "外賣管理系統",switchLanguage: "切換語言",blanketOrder: "總訂單",totalSales: "總銷售額",orderQuantityToday: "今日訂單量",orderSalesToday: "今日銷售量",Home: "後台首頁",OrderManagement: "訂單管理",ProductManagement: "商品管理",ProductList: "商品列表",ProductAdd: "商品添加",ProductCategory: "商品分類",ShopManagement: "店鋪管理",AccountManagement: "賬號管理",AccountList: "賬號列表",AccountAdd: "賬號添加",ChangePassword: "修改密碼",PersonalCenter: "個人中心",SalesStatistics: "銷售統計",ProductStats: "商品統計",OrderStats: "訂單統計",ProductCategory: "商品分類",},
};

4、在main.js中引入

import { createApp } from "vue";
import App from "./App.vue";
import i18n from "./i18n/index.js";  //引入国际化的包
const app = createApp(App);
app.use(i18n);//使用
app.mount("#app");

三、前端去使用 下拉列表语言切换

在这里插入图片描述

Element组件的搭建

  <div class="header-right"><el-dropdown placement="bottom-start" style="margin-right: 20px"><el-button> {{ $t("messages.switchLanguage") }} </el-button><template #dropdown><el-dropdown-menu><el-dropdown-item @click="changeLanguage('zh')">中文</el-dropdown-item><el-dropdown-item @click="changeLanguage('en')">English</el-dropdown-item><el-dropdown-item @click="changeLanguage('ft')">繁體</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div>
import { ref } from "vue";
//引入i18n
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
//  切换语言 函数
const changeLanguage = (type:string) => {locale.value = type;
};

3、将切换的语言展示到页面

 <h2 style="color: #595959; margin-bottom: 20px">{{ $t("messages.OrderStats") }}</h2>

其他组件不需要再去引入i18n ,和编写 切换函数了。因为main.ts将其作为全局使用。

在这里插入图片描述

相关文章:

Vue3国际化多语言的切换

参考链接: link Vue3国际化多语言的切换 一、安装 vue-i18n 和 element-plus vue-i18n 是一个国际化插件&#xff0c;专为 Vue.js 应用程序设计&#xff0c;用于实现多语言支持。它允许你将应用程序的文本、格式和消息转换为用户的首选语言&#xff0c;从而提供本地化体验。…...

使用XAML语言仿写BiliBil登录界面

实现步骤 实现左右布局 使用了Grid两列的网格布局&#xff0c;第一列宽度占35%&#xff0c;第二列宽度占65%。使用容器布局Border包裹左右布局内容&#xff0c;设置背景色、设置圆角 <!-- 定义两列--> <Grid.ColumnDefinitions><ColumnDefinition Width &quo…...

机器学习和深度学习

机器学习&#xff08;Machine Learning&#xff0c;简称 ML&#xff09;和深度学习&#xff08;Deep Learning&#xff0c;简称 DL&#xff09;都是人工智能&#xff08;AI&#xff09;领域的重要技术&#xff0c;它们的目标是使计算机通过数据学习和自主改进&#xff0c;从而完…...

Word表格批量提取数据到Excel,Word导出到Excel,我爱excel

Word表格批量提取数据到Excel&#xff0c;Word导出到Excel - 我爱Excel助你高效办公 在日常办公中&#xff0c;Word表格常常用于记录和整理数据&#xff0c;但将这些数据从Word提取到Excel&#xff0c;特别是当涉及多个文件时&#xff0c;常常让人头疼。如果你经常需要将多个W…...

SpringSecurity抛出异常但AccessDeniedHandler不生效

文章目录 复现原因 复现 Beanpublic SecurityFilterChain securedFilterChain(HttpSecurity http) throws Exception {//...//异常http.exceptionHandling(except -> {except.authenticationEntryPoint(new SecurityAuthenticationEntryPoint());except.accessDeniedHandle…...

高清绘画素材3600多张动漫线稿线描上色练习参考插画原画

工作之余来欣赏一波线稿&#xff0c;不务正业版... 很多很多的线稿... 百度网盘 请输入提取码...

EXCEL技巧

1. EXCEL技巧 1.1. 截取表格内某个字符之前的所有字符 1.1.1.样例 在单元格内输入函数&#xff1a; # 截取A1单元格内“分”字符左边的所有字符 LEFT(A1,FIND("分",A1)-1)1.1.2.截图...

python制作翻译软件

本文复刻此教程&#xff1a;制作属于自己的翻译软件-很简单【Python】_哔哩哔哩_bilibili 一、明确需求&#xff08;以搜狗翻译为例&#xff09; &#xff08;1&#xff09;网址&#xff1a;https://fanyi.sogou.com/text &#xff08;2&#xff09; 数据&#xff1a;翻译内容…...

ollama+FastAPI部署后端大模型调用接口

ollamaFastAPI部署后端大模型调用接口 记录一下开源大模型的后端调用接口过程 一、ollama下载及运行 1. ollama安装 ollama是一个本地部署开源大模型的软件&#xff0c;可以运行llama、gemma、qwen等国内外开源大模型&#xff0c;也可以部署自己训练的大模型 ollama国内地…...

BERT:深度双向Transformer的预训练用于语言理解

摘要 我们介绍了一种新的语言表示模型&#xff0c;名为BERT&#xff0c;全称为来自Transformer的双向编码器表示。与最近的语言表示模型&#xff08;Peters等&#xff0c;2018a&#xff1b;Radford等&#xff0c;2018&#xff09;不同&#xff0c;BERT旨在通过在所有层中联合调…...

【AI-23】深度学习框架中的神经网络3

神经网络有多种不同的类型&#xff0c;每种类型都针对特定的任务和数据类型进行优化。根据任务的特点和所需的计算能力&#xff0c;可以选择适合的神经网络类型。以下是一些主要的神经网络类型及其适用的任务领域。 1. 深度神经网络&#xff08;DNN&#xff09; 结构&#xf…...

网站运营数据pv、uv、ip

想要彻底弄清楚pv uv ip的区别&#xff0c;首先要知道三者的定义&#xff1a; IP(独立IP)的定义&#xff1a; 即Internet Protocol,指独立IP数。24小时内相同公网IP地址只被计算一次。 PV(访问量)的定义&#xff1a; 即Page View,即页面浏览量或点击量&#xff0c;用户每次刷…...

高阶知识库搭建实战五、(向量数据库Milvus安装)

以下是关于在Windows环境下直接搭建Milvus向量数据库的教程: 本教程分两部分,第一部分是基于docker安装,在Windows环境下直接安装Milvus向量数据库,目前官方推荐的方式是通过Docker进行部署,因为Milvus的运行环境依赖于Linux系统。 如果你希望在Windows上直接运行Milvus…...

【TR369】RTL8197FH-VG+RTL8812F增加TR369 command节点

sdk说明 ** Gateway/AP firmware v3.4.14b – Aug 26, 2019**  Wireless LAN driver changes as:  Refine WiFi Stability and Performance  Add 8812F MU-MIMO  Add 97G/8812F multiple mac-clone  Add 97G 2T3R antenna diversity  Fix 97G/8812F/8814B MP issu…...

FPGA实现UART对应的电路和单片机内部配合寄存器实现的电路到底有何区别?

一、UART相关介绍 UART是我们常用的全双工异步串行总线&#xff0c;常用TTL电平标准&#xff0c;由TXD和RXD两根收发数据线组成。 那么&#xff0c;利用硬件描述语言实现UART对应的电路和51单片机内部配合寄存器实现的电路到底有何区别呢&#xff1f;接下来我们对照看一下。 …...

数据库模型全解析:从文档存储到搜索引擎

目录 前言1. 文档存储&#xff08;Document Store&#xff09;1.1 概念与特点1.2 典型应用1.3 代表性数据库 2. 图数据库&#xff08;Graph DBMS&#xff09;2.1 概念与特点2.2 典型应用2.3 代表性数据库 3. 原生 XML 数据库&#xff08;Native XML DBMS&#xff09;3.1 概念与…...

【Java基础】Java异常捕捉,throws/throw、finally、try、catch关键字的含义与运用

1. Java 异常处理&#xff1a; 异常是程序中的一些错误&#xff0c;但并不是所有的错误都是异常&#xff0c;并且错误有时候是可以避免的。 比如说&#xff0c;你的代码少了一个分号&#xff0c;那么运行出来结果是提示是错 java.lang.Error&#xff1b;如果你用System.out.p…...

Android Studio 安装配置(个人笔记)

Android studio安装的前提是必须保证安装了jdk1.8版本以上 一、查看是否安装jdk cmd打开命令行&#xff0c;输入java -version 最后是一个关键点 输入 javac &#xff0c;看看有没有相关信息 没有就下载jdk Android studio安装的前提是必须保证安装了jdk1.8版本以上 可以到…...

计算机网络——数据链路层-介质访问控制

一、介质访问控制方法 在局域网中, 介质访问控制(medium access control)简称MAC&#xff0c;也就是信道访问控制方法&#xff0c;可以 简单的把它理解为如何控制网络节点何时发送数据、如何传输数据以及怎样在介质上接收数据&#xff0c; 是解决当局域网中共用信道的使用产生竞…...

pytest日志显示

在 pytest 中&#xff0c;可以通过 钩子函数 和 配置文件 pytest.ini 配置日志的显示方式&#xff0c;实现对日志的灵活控制。以下是常用实现方式及配置说明。 方式一&#xff1a;使用 conftest.py 钩子函数自定义日志显示 通过 conftest.py 文件中的钩子函数&#xff0c;实现…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...