使用 TypeScript 创建工具函数:管理项目版本与环境变量

使用 TypeScript 创建工具函数:管理项目版本与环境变量

文章目录

  • 使用 TypeScript 创建工具函数:管理项目版本与环境变量
  • 一、前言
  • 二、代码示例
    • 1、导入项目的 `package.json`
    • 2、获取版本号
    • 3、获取环境变量的值
    • 4、获取特定的环境变量
  • 三、完整代码
    • 1、工具函数
    • 2、环境代码示例

一、前言

在我们的日常开发中,获取项目的版本信息和环境变量是很常见的需求。尤其是在前后端分离的项目中,前端可能需要知道当前的环境(开发环境、测试环境还是生产环境),以便决定如何处理各种情况。

二、代码示例

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_URLVITE_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

你可能感兴趣的:(TypeScript,Vue.js,Vite,typescript,env)