Vite多环境构建命令简化

最新推荐文章于 2025-09-10 22:41:32 发布

原创

最新推荐文章于 2025-09-10 22:41:32 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#npm #javascript #前端

本文介绍了在实际项目中，面对多种环境构建需求时，如何简化Vite的构建命令。通过环境变量提取和使用npm-run-all工具，优化package.json中的脚本，使得多环境构建更高效。此外，还分享了如何使用vite-plugin-environment插件处理环境变量，并提供了部分前端面试宝典的资源。

背景

实际项目需要构建的环境不仅仅有测试环境和生产环境，可能包含更多的环境：Demo环境,Verify环境，预发布环境等。正常操作就是在package.json中新增构建命令。

比如新增Demo环境构建命令：

{"script": { "build:script": "额外的操作脚本", "build": "cross-env NODE_ENV=production vite build && npm run build:script", "build:test": "cross-env NODE_ENV=test vite build --mode test && npm run build:script", "build:demo": "cross-env NODE_ENV=demo vite build --mode demo && npm run build:script", ...}
}

当环境超过一定的数量时候，package.json中的"script"会变得相当冗长和复杂。