vite-plugin-env-helper

一个用于给 vite 创建项目中 .env 文件中定义的配置项提供 typescript 类型解析和类型支持的插件。

它能读取所有模式 .env 文件中需要暴露的配置项，

并为其生成 typescript 类型定义文件 env.d.ts , 或直接写入其中。

安装

npm i -D vite-plugin-env-helper

使用

配置 vite.config.ts

import { defineConfig, loadEnv, type UserConfig, type ConfigEnv } from 'vite'
import { envHelper, parseLoadEnv } from 'vite-plugin-env-helper'


export default defineConfig((config: ConfigEnv): UserConfig => {
    const prefixes = [ 'VITE_' ]
    const env = parseLoadEnv(loadEnv(config.mode, process.cwd(), prefixes))
    console.log(env)
    return {
        envPrefix: prefixes,
        plugins: [
            vue(),
            envHelper()
        ]
    }
})

// 一些使用示例(插件会自行处理引号问题，所以任意配置都行): 
// .env 文件配置有 VITE_TITLE="app"、 VITE_TITLE='app'、VITE_TITLE=app
const title = import.meta.env.VITE_TITLE // 类型为 string 值为 app

// .env 文件配置有 VITE_ARRAY=[2, 3, 4.5 ]、VITE_ARRAY="[2, 3, 4.5 ]"
const arr = import.meta.env.VITE_ARRAY  // 类型为 Array<any> 值为 [2, 3, 4.5 ]

// .env 文件配置有 VITE_CONFIG={ a: 34, b: "title" }、VITE_CONFIG="{ a: 34, b: 'title' }"
const config = import.meta.env.VITE_CONFIG // 类型为 any 值为 { a: 34, b: "title" }

// 需要注意的是，配置 Array 和 object 类型时，
// 起码要保证值是正确的格式，即用引号包裹的字符串（其他基本数据类型如布尔值或数值类型可除外），否则会被识别为 string 类型。
// { a: sss , b: true, c: [ 2,3,4 ] } 会被识别为 string 类型，
// { a: "sss" , b: true, c: [ 2,3,4 ] } 可识别为 object 类型。

// 另外，随意变更 .env 文件中配置的值后，需要去 env.d.ts 文件中删除对应的字段类型定义，否则会出现配置类型的错误。
// 为了方便，如果 env.d.ts 中无其他定义内容时， 变更 .env 文件配置后可直接删除 env.d.ts ，让它帮我们重新生成。

因为是关于 .env 处理的插件，本身就有着一些限制，秉着开箱即用的原则，就没为插件设计传入参数。

在读取到项目中所有 .env 文件中存在变量后，它会有两个默认行为：

• 查找项目根目录下是否存在 env.d.ts 文件， 不存在则创建并把读取到的变量添加 typescript 类型声明后写入，存在则添加类型声明后写入 env.d.ts 。
• 查找项目根目录下是否存在 eslint.config.ts 文件， 存在则把 env.d.ts 文件加入原有的 globalIgnores 配置项中。