前言

 我们在使用vite搭建项目的时候，我们总会需要在某个时候获取项目的环境变量，比如，我们到底是开发环境还是生产环境，亦或者说是测试环境，我们需要根据环境的不同来配置不同的请求地址、打包的项目名称、打包后文件的出口路径等。我们在vue2中我们通过process.env.NODE_ENV来获取环境，但这vue3+vite中我们是没办法用其来获取的，而在vite中，官方推出了另一种方式来设置以及获取这些环境。

根目录文件配置

 首先，我们的环境首先分为开发环境、生产环境、测试环境，那么，我们来看怎么进行环境配置。

 在项目文件夹的根路径配置生产和开发环境.env.development和.env.production，dev代表开发，prod代表生产

 我的项目还配置了一个test,test代表测试。配置完这些文件之后，我们再在文件里面填充我们需要的公共内容。

文件内容配置

 如图：是我配置的反向代理，项目打包生成文件路径，配置环境，配置axios默认请求线上地址等等，只要式你想要的公共内容都可以去配置。

服务启动

 我们在启动服务时，如果我们不去在服务的地方配置我们添加的文件，那么启动服务后是无法进行访问的。

 服务配置，在package.json中。

 我们分别取配置，启动，打包，测试等命令。

"scripts": {n "serve": "vite --config config/vite.config.ts --mode=development",n "build": "vue-tsc --noEmit && vite build --config config/vite.config.ts --mode=production",n "build:test": "vue-tsc --noEmit && vite build --config config/vite.config.ts --mode=test",n },n

 在package.json中，我们取配置mode模式，如上图，我的mode等于development，其和我的.env.development文件名的development一致。

 以上内容就是本人对vite环境配置的理解，希望对大家有所帮助。