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

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

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

import.meta.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
}