vite开发环境、生产环境配置 - Stitchhhhh - 博客园
https://www.cnblogs.com/angia/p/18220779
1、在项目根目录下（与package.json同级）新建配置文件 .env
.env：
全局环境，没有设置其他环境变量时，会加载这个文件里的内容，
比如所有版本都使用的是同一个接口地址时,就可以写在这一个文件里面就行。
NODE_ENV = env VITE_NAME='全局环境' VITE_BASE_URL='' VITE_TARGET ='https://baidu.com/'
2、在项目根目录下（与package.json同级）新建配置文件 .env.development
.env.development：
开发环境下的配置文件,执行npm run dev命令，会自动加载.env.development文件
会覆盖.env这个文件里定义的环境变量
NODE_ENV = development VITE_NAME='开发环境' VITE_BASE_URL='/api' VITE_TARGET ='https://baidu.com/'
3、在项目根目录下（与package.json同级）新建配置文件 .env.production
.env.production：
生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件
会覆盖 .env这个文件里定义的环境变量。
NODE_ENV = staging VITE_NAME='生产环境' VITE_BASE_URL = 'http://xxxxxx/api' VITE_TARGET ='https://www.bilibili.com/'
4、在package.json 文件中的配置
dev 默认在本地开启测试环境的服务（mode='development'）
start 在本地开启正式环境服务 (mode='production')
build 默认打包到正式环境（基础配置取.env.production 文件中内容）
build:env 默认打包到测试环境（基础配置取.env.development 文件中内容）
5、具体使用
- ".env.[name]"是可以自定义的，在package.json里面做对应的名称修改。
- 根据Vite的约定规则，只有以“VITE_”开头的变量才会在客户端被捕获
- 捕获方式为：import.meta.env.{参数名}，然后重新启动服务
- 执行 npm run dev 时候，vite自动去读取.env.development文件里面的配置
- 执行 npm run build 进行打包，vite自动将.env.production 的内容打包进去
输入命令：
结果：
注：文件需放在根目录下，否则无法注入
6、在vite.config.js中根据环境的不同动态切换路径
defineConfig传入一个函数，方法可以接收一个对象，对象中两个参数：command, mode
command ：
server(npm run dev)
build(npm run build)
mode ：development 或 production
defineConfig传入的方法内可以接收一个对象，
这个对象可以获取command和mode这两个属性，
所以一般.env的文件命名是.env.development 和.env.production
因为这样直接将mode传入 loadEnv(mode, process.cwd() ) 就可以了。
loadEnv 接收三个参数：
mode：模式
envDir：环境变量配置文件所在目录
prefix：接受的环境变量前缀，默认为 VITE_
在vite中默认是VITE_，为 ''，则加载所有环境变量
所以根据环境变量动态配置信息我们可以写成如下
