Vue3组合式API + TS项目中手写国际化插件

本文主要是介绍Vue3组合式API + TS项目中手写国际化插件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 1. 在项目中创建一个国际化插件的文件i18n.ts
    • 2. 创建语言模块json
    • 3. 注册插件
    • 4. 语言切换组件
    • 5. 使用插件(ts中使用全局需注意点)

1. 在项目中创建一个国际化插件的文件i18n.ts

<!-- plugins/i18n.ts -->
export const i18nPlugin = {install(app: any, option: any) {app.config.globalProperties.$t = (key: string) => {return key.split(".").reduce((o, k) => {if (o) return o[k];}, option[localStorage.getItem("language") || "zhCN"]);} }
}

2. 创建语言模块json

<!-- assets/i18n/zh-CN.json -->
{"project": {"projectName": "项目名称"}
}
<!-- assets/i18n/en-US.json -->
{"project": {"projectName": "project name"}
}

3. 注册插件

import zhCN from "./assets/i18n/zh-CN.json";
import enUS from "./assets/i18n/en-US.json";
import { i18nPlugin } from "./plugins/i18n";const app = createApp(App);
app.use(i18nPlugin, {zhCN,enUS,
});

4. 语言切换组件

<!-- components/ChangeLanguage.vue -->
<template><a-select:value="language"@change="changeLanguage"><a-select-option value="zhCN">中文</a-select-option><a-select-option value="enUS">English</a-select-option></a-select>
</template><script lang="ts"setup>
import {ref} from "vue";// 将当前选择的语言存到localStorage中
const language = ref(localStorage.getItem("language") || "zhCN");
const changeLanguage = (value: string) => {language.value = value;localStorage.setItem("language", value);window.location.reload();
};
</script>

5. 使用插件(ts中使用全局需注意点)

<template><ChangeLanguage />
</template>
<!-- component.vue -->
<script lang="ts" setup>
import { getCurrentInstance } from "vue";
import SelectLanguage from "@/components/SelectLanguage.vue";// 通过getCurrentInstance()来获取当前组件实例
const instance = getCurrentInstance();
// 从当前组件实例中获取全局的 $t 函数
const $t = instance?.appContext.app.config.globalProperties.$t;// 调用全局的 $t 函数进行文本翻译
const translatedText = $t('project.projectName');
console.log(translatedText);
</script>

这篇关于Vue3组合式API + TS项目中手写国际化插件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/959195

相关文章

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

使用PyTorch实现手写数字识别功能

《使用PyTorch实现手写数字识别功能》在人工智能的世界里,计算机视觉是最具魅力的领域之一,通过PyTorch这一强大的深度学习框架,我们将在经典的MNIST数据集上,见证一个神经网络从零开始学会识... 目录当计算机学会“看”数字搭建开发环境MNIST数据集解析1. 认识手写数字数据库2. 数据预处理的

SpringBoot项目使用MDC给日志增加唯一标识的实现步骤

《SpringBoot项目使用MDC给日志增加唯一标识的实现步骤》本文介绍了如何在SpringBoot项目中使用MDC(MappedDiagnosticContext)为日志增加唯一标识,以便于日... 目录【Java】SpringBoot项目使用MDC给日志增加唯一标识,方便日志追踪1.日志效果2.实现步

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处