Vite 在特殊的 import.meta.env 对象下暴露了一些常量。这些常量在开发阶段被定义为全局变量,并在构建阶段被静态替换,以使树摇(tree-shaking)更有效。
一、内置常量
一些内置常量在所有情况下都可用
-
import.meta.env.MODE: {string} 应用运行的模式。
-
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由
base配置项决定。 -
import.meta.env.PROD: {boolean} 应用是否运行在生产环境(使用
NODE_ENV='production'运行开发服务器或构建应用时使用NODE_ENV='production')。 -
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与
import.meta.env.PROD相反)。 -
import.meta.env.SSR: {boolean} 应用是否运行在 server 上。
二、环境变量
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;
}









网友评论