vue国际化(中英文切换)

思路:

构建了一个 VueI18n 的实例,明确了默认与备用语言及对应的语言包。在组件中获取组件实例以方便后续操作,设置一个点击事件实现语言切换并触发重新获取消息的动作,ref 创建的 msg 用于存储消息内容,设置一个函数负责消息请求与更新,onMounted 中的操作确保组件挂载后即获取消息。在模板里,展示 msg 并通过 $t 获取国际化翻译文本,同时提供选择框进行语言切换,整体形成了一个完整的国际化功能体系,能灵活切换语言并展示相应的消息和文本,两者紧密配合实现了 Vue 项目中的国际化需求与动态交互。

app.vue

<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { requestMsgApi } from "./api/message";// 获取当前组件实例
const instance = getCurrentInstance();// 切换语言
const onLanguageChange = (lang) => {// 执行语言切换instance.proxy.$i18n.locale = lang;// 重新获取消息requestMessage();
};// 显示在页面中的消息
const msg = ref("");async function requestMessage() {// 发送请求获取消息const response = await requestMsgApi();console.log(response.data.msg);// 保存消息msg.value = response.data.msg;
}// 组件挂载完成之后
onMounted(() => {// 获取消息requestMessage();
});
</script><template>{{ msg }}<ul><li>{{ $t("navbar.home") }}</li><li>{{ $t("navbar.about") }}</li><li>{{ $t("navbar.contact") }}</li></ul><select @change="onLanguageChange($event.target.value)"><option value="zh-CN">中文</option><option value="en-US">English</option></select>
</template>

utils/request.js

import axios from "axios";
import { i18n } from "../locales";const request = axios.create({baseURL: "http://localhost:3000",
});// 请求拦截器
request.interceptors.request.use((config) => {// 将当前语言设置到请求头中config.headers["Accept-Language"] = i18n.global.locale;// 返回配置return config;
});export default request;

main.js

import { createApp } from "vue";
import App from "./App.vue";
import { i18n } from "./locales/index";const app = createApp(App);
app.use(i18n);
app.mount("#app");

message.js

import request from "../utils/request";export function requestMsgApi() {return request({ url: "/msg" });
}

locales/en-US.json

{"navbar": {"home": "Home","about": "About","contact": "Contact"}
}

locales/zh-CN.json

{"navbar": {"home": "首页","about": "关于我们vvvv","contact": "联系方式"}
}

locales/index.js

import { createI18n } from "vue-i18n";
import zhCN from "./zh-CN.json";
import enUS from "./en-US.json";// 创建 VueI18n 实例
export const i18n = createI18n({// 设置默认语言为中文locale: "zh-CN",// 设置备用语言为英文fallbackLocale: "en-US",// 语言包messages: {// 引入中文翻译文件"zh-CN": zhCN,// 引入英文翻译文件"en-US": enUS,},
});

后端

app.js

const express = require("express");
const cors = require("cors");const app = express();app.use(cors());app.get("/", (req, res) => {res.send("welcome");
});app.get("/msg", (req, res) => {// 获取语言const lang = req.headers["accept-language"];// 根据不同的语言响应不同的内容switch (lang) {case "zh-CN":res.json({ msg: "你好" });break;case "en-US":res.json({ msg: "Hello" });break;default:res.json({ msg: "欢迎" });}
});app.listen(3000, () => {console.log(`服务器启动成功, 监听 3000 端口`);
});

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

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

相关文章

C++学习(19)

#学习自用# 宏 当我们编译C文件时&#xff0c;首先预处理器会过一遍所有带# 的语句&#xff08;预编译指令符号&#xff09;&#xff0c;然后进行文本替换。 #include<iostream> using namespace std; #define SQUARE(X) X*Xint main() {int a SQUARE(5);cout <&…

linux-awk分析指令

目录 基本用法: 条件语句: 内置变量: 自定义分隔符: 数学运算: 使用多个文件: 生成“完整使用报告”的示例: 8. 模式匹配 9. BEGIN和END模式 10. 数组和关联数组 11. 脚本方式使用 12. 逐行处理 13. 控制语句 awk 是一个强大的文本处理工具&#xff0c;用于在文本…

路虽远,行则将至 - 附暑期实习、秋招历程经验分享

前言 大家好 许久没有时间静下心来打开编辑器写文章了 忙碌暂过&#xff0c;难得一闲时 求学三年&#xff0c;终到离别时 回忆过往&#xff0c;枯燥且多彩 有一点经验&#xff0c;以文字形式分享&#xff0c;希望帮助到大家 可能是这段时间事多且杂&#xff0c;加上很长一…

电脑桌面上用来记事的便签软件

便签软件已成为我们日常生活中不可或缺的记录工具。想象一下&#xff0c;在繁忙的工作中&#xff0c;你突然需要记下一个重要事项或临时想法&#xff0c;这时&#xff0c;一个便捷、高效的便签软件就显得尤为重要。它能帮助我们迅速捕捉信息&#xff0c;轻松管理琐碎事务&#…

LINUX 安装JAVA

安装上传下载 yum -y install lrzsz 建存放目录 mkdir /source mkdir /source/java 进入目录&#xff0c;拖拉上传JDK 解压 tar -zxvf jdk-8u261-linux-x64.tar.gz 配置 vi /etc/profile 在末尾添加以下配置 export JAVA_HOME/source/java/jdk1.8.0_261 export JRE…

通信设备的网卡

一、网卡的作用 将计算机或者路由器连接到传输介质上的接口&#xff0c;传输介质可以是有线也可以是无线的。 &#xff08;1&#xff09;计算机的网卡 现在的计算机大多有两个网卡&#xff0c;一个是有线网卡一个无线网卡&#xff0c;比如以我们的台式电脑为例 台式电脑千兆网…

【氵】Archlinux+KDE Plasma 6+Wayland 安装nvidia驱动 / 开启HDR

参考: NVIDIA - Arch Linux 中文维基 &#xff08;其实就是把 wiki 简化了一下 注&#xff1a;本教程适用 GeForce 930 起、10 系至 20 系、 Quadro / Tesla / Tegra K-系列以及更新的显卡&#xff08;NV110 以及更新的显卡家族&#xff09;&#xff0c;此处以 RTX3060 为例 …

Scikit-learn 基础教程:机器学习的初步指南

Scikit-learn 是一个用于数据挖掘和数据分析的机器学习库&#xff0c;建立在 NumPy、SciPy 和 matplotlib 之上。它提供了简单而高效的工具来进行数据分析和建模。本文将为您介绍 Scikit-learn 的安装方法、核心组件&#xff0c;以及如何应用这些组件进行一个简单的机器学习项目…

Pytorch--Convolution Layers

文章目录 1.nn.Conv1d2.torch.nn.Conv2d()3.torch.nn.ConvTranspose1d()3.torch.nn.ConvTranspose2d() 1.nn.Conv1d torch.nn.Conv1d() 是 PyTorch 中用于定义一维卷积层的类。一维卷积层常用于处理时间序列数据或具有一维结构的数据。 构造函数 torch.nn.Conv1d() 的语法如…

边缘计算(Edge Computing)_关键概念/优势/应用场景

边缘计算&#xff08;Edge Computing&#xff09;是一种计算范式&#xff0c;它将数据处理和分析从传统的集中式数据中心和云计算平台移至更接近数据生成源头的位置&#xff08;即“边缘”&#xff09;&#xff0c;例如物联网设备、传感器、路由器或其他边缘设备。边缘计算旨在…

vector迭代器失效

1.迭代器失效的根本原因 迭代器就是指针&#xff0c;迭代器失效就是指针失效。 指针失效的有两种情况&#xff1a; 1&#xff09;野指针 2&#xff09;访问越界 2.举例阐述 这段代码已经报错了&#xff0c;我给大家调试一下。可以发现&#xff1a;vector的容量变大了&…

C语言之main函数的返回值(在linux中执行shell脚本并且获取返回值)

一&#xff1a;函数为什么要返回值 &#xff08;1&#xff09;函数 在设计的时候是设计了参数和返回值&#xff0c;参数是函数的输入&#xff0c;返回值是函数的输出 &#xff08;2&#xff09;因为函数需要对外输出数据&#xff08;实际上是函数运行的一些结果值&#xff09;…

springbot 界面美观的超市收银管理系统。

springbot 界面美观的超市收银管理系统。 功能&#xff1a;登录&#xff0c;用户管理&#xff0c;权限菜单管理&#xff0c;首页订单&#xff0c;收入&#xff0c;用户统计&#xff0c; 收银台&#xff0c;销售账单&#xff0c;库存管理&#xff0c;商品分类&#xff0c;供应…

30 岁的程序员,要有 “归零“ 心态

大家好&#xff0c;我是码农先森。 古话说的 “三十而立”&#xff0c;正是担重之时&#xff0c;却大部分人在职场中都处于不上不下的尴尬境地。已经没有刚毕业时那股子冲劲&#xff0c;被生活和工作磨平了棱角。 在技术思想方面&#xff0c;似乎已经触及到了天花板&#xff…

嵌入式系统中判断大小端的方法与实现

第一&#xff1a;大小端基本分析 程序判断计算机是大端的还是小端的&#xff0c;判断的思路是确定一个多字节的值(下面使用的是4字节的整数)&#xff0c;将其写入内存(即赋值给一个变量)&#xff0c;然后用指针取其首地址所对应的字节(即低地址的一个字节)&#xff0c;判断该字…

shell循环以及实验

循环是一种重复执行的代码结构&#xff0c;只要满足循环的条件&#xff0c;会一直执行这个代码 循环条件&#xff1a;在一定范围之内&#xff0c;按照指定次数来执行循环。 循环体&#xff1a;在指定的次数内&#xff0c;执行的命令序列&#xff0c;只要条件满足&#xff0c;…

C#知识|模块化分层学习笔记

哈喽&#xff0c;你好&#xff0c;我是雷工&#xff01; 01 基本分层 典型的两层结构&#xff1a;由UI层 数据访问层 实体类构成。 其中实体类不算一层&#xff0c;本质是一个数据载体。 02 模块化分层 模块概念&#xff1a;在.NET平台中&#xff0c;模块主要是指类库项目。…

Mac下载了docker,在终端使用docker命令时用不了

问题&#xff1a;在mac使用docker的时候&#xff0c;拉取docker镜像失败 原因&#xff1a;docker是需要用app使用的 &#xff0c;所以在使用的时候必须打开这个桌面端软件才可以在终端上使用docker命令&#xff01;&#xff01;&#xff01;

网络安全和信息安全

概述 信息安全、网络安全与网络空间安全是当前信息技术领域内的三个重要概念&#xff0c;它们在某些方面有着紧密的联系&#xff0c;同时在不同的语境和应用场景下又有所区别。本次分析旨在深入理解这三个概念的定义、内涵及其相互关系&#xff0c;以便更好地应用于实际工作中…

latex 新技巧:公式过长怎么编号美观? 如何缩小公式大小,不改编号大小?

常见的公式换行&#xff0c;用到 aligned align等命令 但是如何单独用align&#xff0c;可以默认编号在最短的一行&#xff0c;但是有个缺点&#xff0c;需要手动地将其他行 加上 \nonumber&#xff0c;以防每一行都有编号 \begin{align}\label{eq1} & Line 1 \\ & L…