vite 处理环境变量

在通常项目开发之中，都会区分 开发时服务 和 生产时服务。

对于开发时而言，它内部的数据是 假数据 ，所以我们可以随便修改。

而生产时，它内部数据为 用户的真实数据，所以是不能随意修改的。

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

但是如果这个操作全靠人工切换，那么难免会有疏忽，一旦出现问题将会引起巨大的风险，所以我们期望可以 根据项目状态，自动切换请求的服务地址。

那么这样应该怎么做呢？

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

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

其中有一种 .env.[mode] 的格式可以在 不同模式下加载不同内容 ，这不正是我们想要的吗？

那么明确好之后，下面我们就创建对应的文件：

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

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

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

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

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

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

3. 在配置axios文件中打印

console.log(import.meta.env.VITE_BASE_API)

4.运行项目 打开控制台 发现打印结果为 /api

5.将baseURL更改为 import.meta.env.VITE_BASE_API 配置成功