【Vite】development、mock和production不同环境下的配置

需求

在 Vite 中，你可以使用 .env 文件来管理环境变量和配置，但是与 Vue CLI 不同，Vite 不支持通过不同的环境模式（如 development、production、test）来自动加载不同的环境配置文件。因此，在 Vite 中使用 .env.mock 文件的配置需要稍微不同的方法。

怎么做

1. 创建 .env.mock 文件：

VITE_API_URL=http://mock.api.url
VITE_DEBUG_MODE=true
1
2

2. 安装 dotenv 插件：

npm install dotenv --save-dev

or

yarn add dotenv --dev
1
2
3
4
5

3. 在 Vite 配置中加载 .env.mock 文件：
   vite.config.js

import dotenv from 'dotenv';

// Load .env.mock file
dotenv.config({ path: '.env.mock' });```
1
2
3
4

4. 使用

const apiUrl = process.env.VUE_APP_API_URL;
const debugMode = process.env.VUE_APP_DEBUG_MODE === 'true'; // 注意：值是字符串，需要转换为布尔值
1
2