Vite多环境构建命令简化

最新推荐文章于 2025-03-04 21:20:24 发布

梅花十三儿

最新推荐文章于 2025-03-04 21:20:24 发布

阅读量2k

点赞数 1

文章标签： npm javascript 前端

本文链接：https://blog.csdn.net/Android062005/article/details/127113123

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

实际项目需要构建的环境不仅仅有测试环境和生产环境，可能包含更多的环境：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"会变得相当冗长和复杂。