Vite 从入门到精通 | ENV 环境变量

Build In

在 Vite 中存在五个默认环境变量

• MODE 模式 dev local pro

• BASE_URL

• PROD

• DEV

• SSR

// main.js console.log(import.meta.env) {     "BASE_URL": "/",     "MODE": "development",     "DEV": true,     "PROD": false,     "SSR": false } // npm run build => 会将环境变量硬编码 复制代码

如何自定义 ENV 呢

在根目录创建 .env 文件

定义 env 环境变量前面必须加 VITE_

# .env VITE_TITLE=Hello 复制代码

{     "VITE_TITLE": "Hello",     "BASE_URL": "/",     "MODE": "development",     "DEV": true,     "PROD": false,     "SSR": false } 复制代码

Vite 使用 dotenv 从你的 华景目录 中的下列文件加载额外的环境变量：

.env                # 所有情况下都会加载 .env.local          # 所有情况下都会加载，但会被 git 忽略 .env.[mode]         # 只在指定模式下加载 .env.[mode].local   # 只在指定模式下加载，但会被 git 忽略 复制代码

加载的环境变量也会通过 import.meta.env 暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这个文件中：

DB_PASSWORD=foobar VITE_SOME_KEY=123 复制代码

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

智能提示

在默认情况下, Vite 为 import.meta.env提供了类型定义, 但是我们自定义的环境变量,默认情况下是没有的, 比如我们定义了一个 VITE_TITLE, IDE是不会给出提示的 可以再 src目录下创建一个 env.d.ts 的文件 增加 ImportMetaEnv 的定义:

interface ImportMetaEnv extends Readonly<Record<string, string>> {   readonly VITE_TITLE: string   // 更多环境变量... } interface ImportMeta {   readonly env: ImportMetaEnv } 复制代码