从使用 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 的环境变量