使用 TypeScript 创建工具函数：管理项目版本与环境变量
使用 TypeScript 创建工具函数：管理项目版本与环境变量
訾博ZiBo
发布于 2025-01-06 20:04:45
发布于 2025-01-06 20:04:45
代码可运行
运行总次数：0
代码可运行
使用 TypeScript 创建工具函数：管理项目版本与环境变量
一、前言
在我们的日常开发中，获取项目的版本信息和环境变量是很常见的需求。尤其是在前后端分离的项目中，前端可能需要知道当前的环境（开发环境、测试环境还是生产环境），以便决定如何处理各种情况。
二、代码示例
1、导入项目的 package.json
首先，我们通过 import 语句将项目的 package.json 文件导入到我们的工具函数模块中。
// 导入项目的 package.json 文件，用于获取项目版本等信息
// 需要根据实际情况调整文件路径
import pkg from '../../package.json'2、获取版本号
我们创建一个名为 getPkgVersion 的函数，返回项目的版本号。
/**
* @description: 获取版本号
* @returns: 版本号
*/
export function getPkgVersion(): string {
return pkg.version
}3、获取环境变量的值
接下来，我们创建一个通用的 getEnvValue 函数，用于获取环境变量。
/**
* @description: 获取环境变量的值
* @param key 环境变量的键
* @returns: 返回环境变量的值
*/
export function getEnvValue<T = any>(key: string): T {
// 使用 import.meta.env 获取环境变量
return (import.meta.env as any)[key] as T
}4、获取特定的环境变量
有时，我们可能需要获取特定的环境变量，比如 VITE_BASE_URL 和 VITE_UPLOAD_URL。
/**
* @description: 获取环境变量 VITE_BASE_URL 的值
* @returns: 返回 VITE_BASE_URL 的值或空字符串
*/
export function getBaseUrl(): string {
// 返回环境变量 'VITE_BASE_URL' 的值
return getEnvValue<string>('VITE_BASE_URL')
}
/**
* @description: 获取环境变量 VITE_UPLOAD_URL 的值
* @returns: 返回 VITE_UPLOAD_URL 的值或 '/upload'
*/
export function getUploadUrl(): string {
// 否则，返回环境变量 'VITE_UPLOAD_URL' 的值
return getEnvValue<string>('VITE_UPLOAD_URL')
}三、完整代码
1、工具函数
// 导入项目的 package.json 文件，用于获取项目版本等信息
// 需要根据实际情况调整文件路径
import pkg from '../../package.json'
/**
* @description: 获取版本号
* @returns: 版本号
*/
export function getPkgVersion(): string {
return pkg.version
}
/**
* @description: 获取环境变量的值
* @param key 环境变量的键
* @returns: 返回环境变量的值
*/
export function getEnvValue<T = any>(key: string): T {
// 使用 import.meta.env 获取环境变量
return (import.meta.env as any)[key] as T
}
/**
* @description: 获取环境变量 VITE_BASE_URL 的值
* @returns: 返回 VITE_BASE_URL 的值或空字符串
*/
export function getBaseUrl(): string {
// 返回环境变量 'VITE_BASE_URL' 的值
return getEnvValue<string>('VITE_BASE_URL')
}
/**
* @description: 获取环境变量 VITE_UPLOAD_URL 的值
* @returns: 返回 VITE_UPLOAD_URL 的值或 '/upload'
*/
export function getUploadUrl(): string {
// 否则，返回环境变量 'VITE_UPLOAD_URL' 的值
return getEnvValue<string>('VITE_UPLOAD_URL')
}2、环境代码示例
# BASE_URL
VITE_BASE_URL = https://localhost:8080
# 上传域名
VITE_UPLOAD_URL = /upload本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
