第三章:配置环境变量

2025-10-08  本文已影响0人  诗与远方01

Vite 在特殊的 import.meta.env 对象下暴露了一些常量。这些常量在开发阶段被定义为全局变量,并在构建阶段被静态替换,以使树摇(tree-shaking)更有效。

一、内置常量

一些内置常量在所有情况下都可用

二、环境变量

Vite 自动将环境变量暴露在 import.meta.env 对象下,作为字符串。
为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量

创建环境变量文件

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

创建 .env 文件

# 公共基础路径, 详见: https://cn.vitejs.dev/guide/build.html#public-base-path
VITE_BASE_URL = /

#API 接口路径前缀
VITE_BASE_API_URL = /

#是否清空掉代码中的 console
VITE_DROP_CONSOLE = true

创建 .env.development 文件

# 公共基础路径, 详见: https://cn.vitejs.dev/guide/build.html#public-base-path
VITE_BASE_URL = /

#API 接口路径前缀
VITE_BASE_API_URL = /

#是否清空掉代码中的 console
VITE_DROP_CONSOLE = false

创建 .env.production 文件

# 公共基础路径, 详见: https://cn.vitejs.dev/guide/build.html#public-base-path
VITE_BASE_URL = /

#API 接口路径前缀
VITE_BASE_API_URL = /

#是否清空掉代码中的 console
VITE_DROP_CONSOLE = true

三、TypeScript 的智能提示

默认情况下,Vite 在 vite/client.d.ts 中为 import.meta.env 提供了类型定义。随着在 .env[mode] 文件中自定义了越来越多的环境变量,你可能想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示
要想做到这一点,你可以在 type 目录下创建一个vite-client.d.ts 文件,接着按下面这样增加 ImportMetaEnv 的定义

/// <reference types="vite/client" />

interface ImportMetaEnv {
    /** 网站部署的目录 (公共基础路径) */
    readonly VITE_BASE_URL: string;
    /** API 接口路径前缀 */
    readonly VITE_BASE_API_URL: string;
    /** 是否清空掉代码中的 console */
    readonly VITE_DROP_CONSOLE: string;
    // 更多环境变量...
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}

上一篇 下一篇

猜你喜欢

热点阅读