Vue 3 + TypeScript 实现一个多语言国际化组件(支持语言切换与内容加载)

news2025/7/11 14:04:02

文章目录

  • 一、项目背景与功能概览
  • 二、项目技术架构与依赖安装
    • 2.1 技术栈
    • 2.2 安装依赖
  • 三、国际化组件实现
    • 3.1 创建 `i18n` 实例
    • 3.2 配置 i18n 到 Vue 应用
    • 3.3 在组件中使用国际化内容
    • 3.4 支持语言切换
  • 四、支持类型安全
    • 4.1 添加类型支持
    • 4.2 自动加载语言文件

一、项目背景与功能概览

在全球化应用中,支持多语言是常见的需求。通过国际化(i18n)和本地化(l10n)技术,可以让应用根据用户的语言偏好动态切换界面语言。本文将结合 Vue 3TypeScript 实现一个多语言国际化组件,具备以下功能:

  • 动态语言切换
  • 自动加载语言内容
  • 通过 JSON 文件管理翻译数据
  • 支持类型安全,确保在开发中避免错误

二、项目技术架构与依赖安装

2.1 技术栈

  • Vue 3 + Composition API
  • TypeScript
  • vue-i18n(Vue 官方国际化插件)
  • JSON 文件作为翻译数据源

2.2 安装依赖

我们需要使用 vue-i18n 插件来实现国际化功能。可以通过以下命令安装:

npm install vue-i18n

安装完成后,我们会设置 TypeScript 与 vue-i18n 集成,支持类型推导与检查。

三、国际化组件实现

3.1 创建 i18n 实例

首先,在 src 目录下创建 i18n.ts 文件,初始化 vue-i18n 实例并设置多语言支持。

import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    welcome: 'Welcome to the Vue 3 + TypeScript App',
    changeLanguage: 'Change Language',
  },
  zh: {
    welcome: '欢迎使用 Vue 3 + TypeScript 应用',
    changeLanguage: '切换语言',
  },
  fr: {
    welcome: 'Bienvenue dans l\'application Vue 3 + TypeScript',
    changeLanguage: 'Changer de langue',
  },
}

const i18n = createI18n({
  legacy: false,  // 使用 Composition API 方式
  locale: 'en',  // 默认语言
  messages,      // 配置翻译数据
})

export default i18n

3.2 配置 i18n 到 Vue 应用

main.ts 文件中引入并配置 i18n 实例。

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

createApp(App)
  .use(i18n)  // 注册 i18n 实例
  .mount('#app')

3.3 在组件中使用国际化内容

在 Vue 组件中使用 $t 方法来获取翻译内容,确保组件能够根据当前语言渲染相应文本。

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <button @click="changeLanguage">{{ $t('changeLanguage') }}</button>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

const changeLanguage = () => {
  locale.value = locale.value === 'en' ? 'zh' : locale.value === 'zh' ? 'fr' : 'en'
}
</script>

3.4 支持语言切换

我们使用 Vue 3 的 reactiveref 来动态更新语言,并通过 locale.value 切换当前语言。

changeLanguage 方法中,我们通过检查当前语言来切换到下一个语言。可以根据需要拓展此功能,例如通过按钮控制切换。

四、支持类型安全

4.1 添加类型支持

为了确保开发中不出现错误,我们需要为翻译内容添加类型支持。创建一个 types 文件来定义语言数据类型。

// src/types/i18n.d.ts
declare module 'vue-i18n' {
  export interface I18n {
    messages: {
      en: Record<string, string>
      zh: Record<string, string>
      fr: Record<string, string>
    }
  }
}
{/typescript}

然后,在 `i18n.ts` 中引用此类型声明:

{typescript}
import { createI18n, I18n } from 'vue-i18n'

const i18n: I18n = createI18n({
  legacy: false,
  locale: 'en',
  messages,
})

export default i18n

4.2 自动加载语言文件

为了更好地管理不同语言的内容,可以将每种语言的翻译数据拆分到不同的 JSON 文件中。

假设我们将语言文件放在 src/locales 目录下:

  • en.json
  • zh.json
  • fr.json

i18n.ts 中动态导入语言文件:

import { createI18n } from 'vue-i18n'

const messages = {
  en: () => import('./locales/en.json'),
  zh: () => import('./locales/zh.json'),
  fr: () => import('./locales/fr.json'),
}

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messages,
})

export default i18n

这样,当语言切换时,vue-i18n 会动态加载相应的语言文件。


到这里,这篇文章就和大家说再见啦!我的主页里还藏着很多 篇 前端 实战干货,感兴趣的话可以点击头像看看,说不定能找到你需要的解决方案~
创作这篇内容花了很多的功夫。如果它帮你解决了问题,或者带来了启发,欢迎:
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒:
转载请注明原文链接,商业合作请私信联系
感谢你的阅读!我们下篇文章再见~ 💕

在这里插入图片描述

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

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

相关文章

PhalApi 2.x:让PHP接口开发从“简单”到“极简”的开源框架

—— 专为高效开发而生&#xff0c;助你轻松构建高可用API接口 一、为什么选择PhalApi 2.x&#xff1f; 1.轻量高效&#xff0c;性能卓越 PhalApi 2.x 是一款专为接口开发设计的轻量级PHP框架&#xff0c;其核心代码精简但功能强大。根据开发者实测&#xff0c;在2核2G服务器…

Java 企业级应用:SOA 与微服务的对比与选择

企业级应用开发中&#xff0c;架构设计是决定系统可扩展性、可维护性和性能的关键因素。SOA&#xff08;面向服务的架构&#xff09;和微服务架构是两种主流的架构模式&#xff0c;它们各自有着独特的和设计理念适用场景。本文将深入探讨 SOA 和微服务架构的对比&#xff0c;并…

Zookeeper的典型应用场景?

大家好&#xff0c;我是锋哥。今天分享关于【Zookeeper的典型应用场景?】面试题。希望对大家有帮助&#xff1b; Zookeeper的典型应用场景? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 ZooKeeper 是一个开源的分布式协调服务&#xff0c;主要用于管理和协调大…

数据分析不只是跑个SQL!

数据分析不只是跑个SQL&#xff01; 数据分析五大闭环&#xff0c;你做到哪一步了&#xff1f;闭环一&#xff1a;认识现状闭环二&#xff1a;原因分析闭环三&#xff1a;优化表现闭环四&#xff1a;预测走势闭环五&#xff1a;主动解读数据 数据思维&#xff1a;WHY-WHAT-HOW模…

Dify智能体平台源码二次开发笔记(4) - 多租户的SAAS版实现

前言 Dify 的多租户功能是其商业版的标准功能&#xff0c;我们应当尊重其盈利模式。只有保持良性的商业运作&#xff0c;Dify 才能持续发展&#xff0c;并为用户提供更优质的功能。因此&#xff0c;此功能仅限学习使用。 我们的需求是&#xff1a;实现类似 SaaS 版的账号隔离&a…

layui中transfer两个table展示不同的数据列

在项目的任务开发中需要达到transfer右侧table需要有下拉框可选择状态&#xff0c;左侧table不变 使用的layui版本为2.4.5&#xff0c;该版本没有对transfer可自定义数据列的配置&#xff0c;所以改动transfer.js中的源码 以下为transfer.js部分源码 也是transfer.js去render的…

【机器学习】机器学习笔记

1 机器学习定义 计算机程序从经验E中学习&#xff0c;解决某一任务T&#xff0c;进行某一性能P&#xff0c;通过P测定在T上的表现因经验E而提高。 eg&#xff1a;跳棋程序 E&#xff1a; 程序自身下的上万盘棋局 T&#xff1a; 下跳棋 P&#xff1a; 与新对手下跳棋时赢的概率…

STM32 BOOT设置,bootloader,死锁使用方法

目录 BOOT0 BOOT1的配置含义 bootloader使用方法 芯片死锁解决方法开发调试过程中&#xff0c;由于某种原因导致内部Flash锁死&#xff0c;无法连接SWD以及JTAG调试&#xff0c;无法读到设备&#xff0c;可以通过修改BOOT模式重新刷写代码。修改为BOOT01&#xff0c;BOOT10…

【Redis】string类型

目录 1、介绍2、底层实现【1】SDS【2】int编码【3】embstr编码【4】raw编码【5】embstr和raw的区别 3、常用指令【1】字符串基本操作&#xff1a;【2】批量操作【3】计数器【4】过期时间【5】不存在就插入 4、使用场景 1、介绍 string是redis中最简单的键值对形式&#xff0c;…

PostgreSQL全平台安装指南:从入门到生产环境部署

一、PostgreSQL核心特性全景解析 1.1 技术架构深度剖析 graph TDA[客户端] --> B(连接池)B --> C{查询解析器}C --> D[优化器]D --> E[执行引擎]E --> F[存储引擎]F --> G[物理存储]G --> H[WAL日志]H --> I[备份恢复] 1.2 特性优势对比矩阵 特性维度…

UE5 物理模拟 与 触发检测

文章目录 碰撞条件开启模拟关闭模拟 多层级的MeshUE的BUG 触发触发条件 碰撞 条件 1必须有网格体组件 2网格体组件必须有网格&#xff0c;没有网格虽然可以开启物理模拟&#xff0c;但是不会有任何效果 注意开启的模拟的网格体组件会计算自己和所有子网格的mesh范围 3只有网格…

做仪器UI用到的颜色工具网站

https://color.adobe.com/zh/create/color-wheel 1. 图片取颜色工具 2. 对比度工具&#xff0c;煤矿井下设备&#xff0c;光线暗&#xff0c;要求背景与文字有合适的对比度&#xff0c;可以用这个软件 3. 颜色生成ARGB的值工具&#xff0c;这三个工具&#xff0c;都在上面这…

网络安全·第三天·ICMP协议安全分析

一、ICMP功能介绍 ICMP&#xff08;Internet Control Message Protocal&#xff09;是一种差错和控制报文协议&#xff0c;不仅用于传输差错报文&#xff0c; 还传输控制报文&#xff0c;但是ICMP只是尽可能交付&#xff0c;提供的服务是无连接、不可靠的&#xff0c;并不能保…

SpringBoot对接火山引擎大模型api实现图片识别与分析

文章目录 一、前言二、创建应用三、后端1.SDK集成2.调用Rest API 四、前端 一、前言 Spring AI实战初体验——实现可切换模型AI聊天助手-CSDN博客 如上&#xff0c;在上一篇博客&#xff0c;我们已经实现了spring ai对接本地大模型实现了聊天机器人&#xff0c;但是目前有个新…

单片机方案开发 代写程序/烧录芯片 九齐/应广等 电动玩具 小家电 语音开发

在电子产品设计中&#xff0c;单片机&#xff08;MCU&#xff09;无疑是最重要的组成部分之一。无论是消费电子、智能家居、工业控制&#xff0c;还是可穿戴设备&#xff0c;小家电等&#xff0c;单片机的应用无处不在。 单片机&#xff0c;简而言之&#xff0c;就是将计算机…

ARCGIS PRO 在已建工程地图中添加在线地图

一、手工添加 如图所示&#xff1a; 1、在上方的菜单栏中点击“插入”&#xff0c;选择“连接” 2、新建ArcGIS Server 3、在弹出框中输入在线图集的URL&#xff0c;点击“确定” https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer 4、查看在…

ScholarCopilot:“学术副驾驶“

这里写目录标题 引言&#xff1a;学术写作的痛点与 AI 的曙光ScholarCopilot 的核心武器库&#xff1a;智能生成与精准引用智能文本生成&#xff1a;不止于“下一句”智能引用管理&#xff1a;让引用恰到好处 揭秘背后机制&#xff1a;检索与生成的动态协同快速上手&#xff1a…

MATLAB仿真多相滤波抽取与插值的频谱变化(可视化混叠和镜像)

MATLAB画图仿真多相滤波抽取与插值的频谱变化 可视化多速率信号处理抽取与插值的频谱变化 实信号/复信号 可视化混叠和镜像 目录 前言 一、抽取的基本原理 二、MATLAB仿真抽取运算 三、内插的基本原理 四、MATLAB仿真内插运算 总结 前言 在多速率系统中增加信号采样率的运…

MySQL-存储引擎索引

存储引擎 MySQL体系结构 1). 连接层 最上层是一些客户端和链接服务&#xff0c;包含本地sock 通信和大多数基于客户端/服务端工具实现的类似于 TCP/IP的通信。主要完成一些类似于连接处理、授权认证、及相关的安全方案。在该层上引入了线程 池的概念&#xff0c;为通过认证安…

图像处理有哪些核心技术?技术发展现状如何?

在数字化信息爆炸的时代&#xff0c;文档图像预处理技术正悄然改变着我们处理文字信息的方式。无论是手持拍摄的收据、扫描仪中的身份证&#xff0c;还是工业机器人采集的复杂文档&#xff0c;预处理技术都在背后默默提升着OCR&#xff08;光学字符识别&#xff09;系统的性能。…