美文网首页
第三章:配置环境变量

第三章:配置环境变量

作者: 诗与远方01 | 来源:发表于2025-10-08 21:20 被阅读0次

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;
}

相关文章

网友评论

      本文标题:第三章:配置环境变量

      本文链接:https://www.haomeiwen.com/subject/acranjtx.html