Vite环境变量和模式

环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。

baseURL进行项目开发时，我们需要把服务切换为 DEV 模式，而在打包项目时需要切换为 PROD 模式。

`.env`文件

在 vite 中提供了 .env 文件，该文件为环境变量文件，默认提供了四种文件格式：

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

环境加载优先级

一份用于指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env）。

另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。

.env 类文件会在 Vite 启动一开始时被加载，而改动会在重启服务器后生效。

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

模式

.env.[mode] 的格式可以在 不同模式下加载不同内容.我们可以创建对应的文件：

新建 .env.development 文件，表示 开发时 的 .env 文件

# 只在指定开发模式（development）下加载

# base api, 只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理
VITE_BASE_API = '/api'

新建 .env.production 文件，表示 生产时 的 .env 文件

# 只在指定生产模式（production）下加载

# base api, 只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理
VITE_BASE_API = '/prod-api'

在 src/utils/request.js 中打印 VITE_BASE_API
console.log(import.meta.env.VITE_BASE_API)
此时执行 npm run dev 时，控制台打印为 /api ，表示 开发时服务地址
执行 npm run build 打包项目后运行 dist 目录，浏览器打印为 /prod-api，表示 发布时服务地址
表示 环境变量配置成功，此时修改 baseURL 为 import.meta.env.VITE_BASE_API 变量即可
baseURL: import.meta.env.VITE_BASE_API
重新运行项目，接口依然请求成功

Vite环境变量和模式

环境变量

.env文件

模式

`.env`文件