配置环境变量的目的就是根据代码运行的不同环境（生产和开发）配置不同的变量。
原理
loadEnv(mode, process.cwd(), '')
-
mode和下图的mode相对应，--mode development表示找.env.development文件的环境变量，--mode-test表示找.env.test文件的环境变量。执行不同的命令会找不同的环境变量文件。 -
process.cwd()表示node进程的当前工作目录，默认是我们启项目的目录就是根目录。也就是说设置环境变量的文件需要放在根目录下，如果要放在别的目录下，可以在loadEnv第二个入参配置，默认就是根目录。
步骤
1.步骤
首先在代码的根目录下新建.env.development和.env.production文件（和src同级）
2. 在对应的环境文件中配置环境参数，需要加上
VITE_前缀才能在后续读取。如果不加VITE_在src中通过import.meta.env.__是拿不到的。
3. 在package.json文件的启动命令上加上--mode [mode]，vite指令默认测试环境，vite build默认构建生产环境
4. 如果要在项目中获取在
.env中配置的环境参数使用import.meta[参数名]
5. vite默认不加载
.env文件，会在执行完vite配置后才确定加载哪个，如果需要在vite.config.js中读取参数值，需要以下操作，通过const env = loadEnv(mode, process.cwd(), '')获取.env信息
6.vite.config.ts中
base配置项是开发或生产环境服务的公共基础路径,配置之后在项目中可以通过import.meta.env.BASE_URL来访问，如果设置了环境变量也可以通过环境变量来访问。
7.在vite中怎么区分生产和开发环境（会执行不同的编译命令）
webpack中的环境变量
process.env.NODE_ENV可以用来区分当前代码运行在哪个环境，process.env.NODE_ENV === 'development'表示开发环境，process.env.NODE_ENV === 'production'表示生产环境。
process.env是Nodejs提供的一个API，其返回一个对象，包含了当前Shell的所有环境变量
参考：
juejin.cn/post/717201…
vue3项目的index.html页面如何获取环境变量
index.html页面中的title可能会用到环境变量。
步骤
下载vite-plugin-html插件；在vite.config.ts中引入并配置相关变量；配置后index页面就可以用了
借鉴: juejin.cn/post/722328…
