vite3+vue3+ts+pinia + Naive UI 项目实战 —— 区分运行环境并定义 baseURL
接前三篇 《项目创建与初始配置》 《国际化配置》 《数据表格与渲染函数》 继续我们的后台项目。
为什么需要区分运行环境
先来说说 2 个在我司的项目开发过程中遇到的问题：
- 后端人员在调试时可能需要对前端代码进行些顺手的小更改，然后他们又喜欢使用本地的接口地址，这就导致如果他们调整了项目的代码，更新了 git 仓库的 dev 分支，我去拉取合并到我自己的分支后，一运行请求就报错，一查发现接口的 baseUrl 被改成了 'localhost:xxx' 。。。
- 测试的同学在测试时，为了找 bug，会对数据进行一通多少令人有些费解的操作；或者项目上线了，如果我和测试或客户使用的服务器（换句话说也就是接口的 baseUrl）是同一个，那么势必造成混乱。
基于以上 2 点问题，我们有必要根据不同的情况，区分运行环境，以配置不同的服务器地址（baseUrl）或其它一些变量。
vite 默认提供的内建变量
因为是使用 vite 构建的项目，通过查阅文档，可以看到下面这句话：
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。
之前我还写过一篇文章介绍如何在 nuxt2 项目中设置环境变量，其中有用到 node 的 process.env，而 vite 在开发环境下构建项目时，不像 webpack 那样需要通过 node 进行一系列的操作，所以其使用 import.meta.env 对象来暴露环境变量，并且默认提供了几个内建变量，下面介绍其中 3 个：
import.meta.env.MODE：应用运行的模式。
我们可以在 src\App.vue 中执行 console.log(import.meta.env.MODE) 查看：
如果运行 npm run dev，也就是开发环境，则结果为：
如果运行 npm run build 对项目进行打包，再运行 npm run preview 预览生产环境下的项目，由于 vite 默认是会去掉 console 信息的，想查看结果，我们可以更改打印代码如下：
const { log } = console
const myLog = {
log: log.bind(console)
}
myLog.log(import.meta.env.MODE)
得到的结果为：
import.meta.env.PROD：应用是否运行在生产环境。import.meta.env.DEV： 应用是否运行在开发环境。
如何设置环境变量及定义 baseURL
继续查阅 vite 文档还能看到如下图所示的内容：
于是我在项目的根目录下新建了 3 个文件：
其中 .env.hqy（hqy 是我名字的缩写）里设置的就是专门用于我自己开发时使用的接口 baseUrl，而另外 2 个则用来设置开发（让后端自己玩）和生产环境下的 baseUrl，当然也可以再设置个 .env.testing 给测试用：
# .env.hqy
VITE_BASE_API = 'http://api.xxx.xxxxx.cn/'
请注意，变量名必须以 VITE_ 为前缀。
然后在 package.json 中添加配置：
{
"scripts": {
"hqy": "vite --mode hqy",
},
}
现在，如果我们运行 npm run hqy，然后在 App.vue 执行 console.log(import.meta.env) 结果如下：
于是，在 axios 的配置中就可以直接这样写了（有对 axios 进行一些封装）：
// src\service\index.ts
const service = new Request({
baseURL: import.meta.env.VITE_BASE_API,
})
至此，我们已经实现了根据不同运行环境来定义 baseURL 的目标。