前言
当我们使用vite构建工具开发项目时，一般情况下，会分为三个环境，开发环境，测试环境，生产环境。我们每个环境的接口地址、一些参数的配置在每个环境中都有些区别，环境变量与模式的概念就显得十分重要了。
环境变量
.env文件
在研究环境变量与模式之前，我们需要了解根目录下的.env文件。.env文件的命名规则有以下几种：
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载，但会被 git 忽略
.env文件中配置的信息即是环境变量。并且只有以vite_开头的变量才会暴露出来给我们项目中使用。如下配置：
// .env.developent
// VITE 开头的才能暴露在外部读取
NODE_ENV = 'development' || ‘production’
VITE_APP_BASE_API = '/api'
关于.env文件的优先级
.env.xxx 的优先级比 .env 高
如何访问环境变量
1.在vite.config.ts中访问环境变量：
在vite.config.ts中可以使用process.env访问所有的环境变量
// vite.config.ts
console.log('global', process.env);
由于vite默认是不加载.env，需要执行完vite配置后才能确定加载哪一个。vite给出的解决方案是：
import { defineConfig, loadEnv} from 'vite'
// 将配置的对象改为方法
export default defineConfig(({ command, mode }) => {
// 根据当前工作目录中的 `mode` 加载 .env 文件
// 如果设置第三个参数为 ''， 会加载所有环境变量
// const env = loadEnv(mode, process.cwd(), '');
const env = loadEnv(mode, process.cwd());
console.log('env', env);
return {
// vite 配置
}
})
2.在项目中访问环境变量：
// main.ts
console.log('env', import.meta.env)
3.在根目录的html中访问
// 环境变量的变量名
<title>%VITE_TITLE%</title>
关于模式
环境
最初谈到模式时，有时候会混淆构建命令与模式的关系，所以我想先提关于package.json的几个命令:
vite构建的是开发环境vite build构建的是生产环境vite build --mode staging这个就牵扯到模式了
"script":{
"dev": "vite",
"build": "vite build",
"build:stage": "vite build --mode staging"
}
默认模式
vite 默认有两种模式：
1. 开发服务器（dev 命令）运行在 development(开发)模式下
2. build 命令则运行在 production(生产)模式
若根目录下存在.env.production的配置文件时，vite build 会默认读取.env.production配置信息。
自定义模式：
如果项目的配置较多，就可以自定义模式，新建.env.xxx文件(xxx，即为模式的名称)，规范如.env文件上展示
如需要运行自定义的模式，需要在pakage.json中配置对应的模式，即可获取.env文件中的环境变量：
// 在 script 中运行命令
"scripts": {
"dev": "vite",
// --mode 后面的名称是 .env.xxx 文件的 xxx
"dev:test": "vite --mode xxx",
},
