从使用 Create React App 转到 Vite，有很多不熟悉的地方，这篇文章简单的对 Vite 在不同环境设定不同变 数做简单的笔记
不同的环境有不同的环境变数值是很正常的，ex 开发环境连开发环境的后端，正式环境连正式的环境的后端，开发环境有开发环境的api key，正式环境有正式环境的api key， 之前用过 npm-config，处理过类似的需求，不过 Vite 自己就内建处理这类需求的方法
.env 文件
vite 预设有两种环境：development(开发环境)、production(正式环境)，先在根目录下建立两支程式 .env.development、.env.production，如下图
.env 的内容大概长这样，内容就是在不同环境会不一样，要自行定义的值
注意，key 值需要用 VITE_ 开头 才会读的到
内建环境变量
Vite 有几个内建的环境变量
- import.meta.env.MODE:
{string}应用运作的模式。 - import.meta.env.BASE_URL:
{string}部署应用程式时的基本 URL。 他由base 配置项决定。 - import.meta.env.PROD:
{boolean}应用是否运行在生产环境（使用 NODE_ENV='production' 运行开发伺服器或建置应用程式时使用 NODE_ENV='production' ）。 - import.meta.env.DEV:
{boolean}应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。 - import.meta.env.SSR:
{boolean}应用程式是否运行在 server 上
直接来测试，在开发环境执行 npm run dev，用 console.log 将这些值印出来
就可以看到这是在 development 环境，如果是在正式环境就可以看到 import.meta.env.MODE 的值是 production
读取设定值
举例我要取得 .env.development 的 VITE_API_HOST 这个值
const apiHost = import.meta.env.VITE_API_HOST; // http://localhost:8085
这样就简单可以取得值
Build
一般执行
npm run build
建置后的结果是读取 .env.production 这个档案的环境变量
如果要建置读取 .env.development 开发环境，可以执行
npm run build -- --mode development
两个以上的环境
如果有两个以上的环境，像是 qa 测试环境
- 建立 .env.qa 档案
- 执行 npm run build -- --mode qa
这样就会加载 .env.qa 的环境变量
