Vue 项目多环境配置实战：一文搞懂 dev(开发)、test(测试)、prod(生产) 的启动与打包

目录引言一. 你的项目配置解析二. 命令与环境的对应关系1.开发环境 (Development)2.测试环境 (Staging/Test)3.生产环境 (Production)三. 核心对比打的是哪个包四. 进阶如何实现“一次构建多处部署”方案外部 JS 配置文件五. 本地如何预览生产环境总结摘要在日常开发中我们经常需要面对开发、测试、生产等多个环境。很多同学在看到package.json中的build:stage和build:prod时会感到困惑到底哪个命令打包的是测试环境哪个是生产环境本文将结合实际的package.json配置深入浅出地讲解 Vue 项目的多环境启动与打包策略助你彻底告别环境混淆。引言前端工程化中环境管理是一个核心痛点。理想情况下我们需要保证代码在不同环境下的行为一致同时又能灵活地配置 API 地址。目前主流的方案主要分为“打包时区分”和“运行时配置”。针对 Vue CLI 项目最常见的还是通过mode参数在打包时进行区分。如果你的项目package.json中的scripts长这样那么这篇文章就是为你量身定做的一. 你的项目配置解析假设我们看到的package.json的scripts模块配置如下scripts: { dev: vue-cli-service serve, build:prod: vue-cli-service build, build:stage: vue-cli-service build --mode staging, preview: node build/index.js --preview, lint: eslint --ext .js,.vue src, postinstall: patch-package }在这个配置中项目维护者采用了标准的“多包策略”即不同环境打不同的包。下面我们来详细拆解这些命令分别对应什么环境。二. 命令与环境的对应关系在 Vue CLI 中环境的区分主要依赖于.env文件。构建工具会根据--mode参数去加载对应的文件。1.开发环境 (Development)启动命令npm run dev加载文件.env.development作用用于本地开发调试启动本地热更新服务器Hot Reload不进行代码压缩。2.测试环境 (Staging/Test)打包命令npm run build:stage加载文件.env.staging作用专门用于测试服务器。关键点注意命令中的--mode staging。这告诉 Webpack 去读取.env.staging文件。如果你的项目中有这个文件里面配置的 API 地址通常是指向测试服务器的 IP。3.生产环境 (Production)打包命令npm run build:prod(或简写为npm run build)加载文件.env.production作用用于正式上线。关键点vue-cli-service build默认就是--mode production模式。因此即使命令里没写--mode它也会默认加载.env.production文件将 API 地址替换为正式服务器的地址。三. 核心对比打的是哪个包很多同学会有疑问“npm run build打的不是测试包吗”答案是否定的。根据上述配置情况如下表所示命令别名 (Script)实际执行命令对应环境包含的 API 地址build:prodbuild(默认 prod 模式)生产环境.env.production中的正式 IPbuild:stagebuild --mode staging测试环境.env.staging中的测试 IP结论如果你想要部署到测试服务器请务必运行npm run build:stage。如果你想要部署到正式服务器请运行npm run build:prod。四. 进阶如何实现“一次构建多处部署”虽然上面的配置是标准做法但如果你希望真正做到“只打包一次随便部署”即npm run build打出的包既能在测试机用也能在生产机用你需要引入运行时配置。方案外部 JS 配置文件1、原理不把 API 地址写死在打包的 JS 里而是放在一个外部的config.js中。2、实现在public目录下创建config.js挂载变量到window如window.SITE_CONFIG { baseUrl: xxx }。在main.js或请求封装中读取window.SITE_CONFIG。打包直接运行npm run build:prod或者任意一个 build 命令此时内置的环境变量仅作为兜底。部署上传dist文件夹后根据目标服务器手动或通过脚本替换根目录下的config.js文件。五. 本地如何预览生产环境有时候我们需要在上线前本地预览一下打包后的效果防止出现白屏或路径错误。步骤一先打包bashnpm run build:prod # 或 build:stage步骤二启动预览服务器bashnpm run preview这会启动一个本地静态服务器通常是http://localhost:9527或:4173模拟生产环境的访问。总结在 Vue 项目中package.json中的scripts命令决定了环境的走向。1、看命令是否有--mode xxx参数决定了加载哪个.env文件。2、看文件.env.production通常是正式环境.env.staging是测试环境。3、最佳实践如果团队运维能力强推荐运行时配置外部 JS保证代码一致性。如果运维流程简单使用本文提到的多命令打包build:stage/build:prod是最直观、最不容易出错的方式。一句话建议在没有完全搞懂项目配置前部署测试环境请严格使用build:stage命令不要直接用生产打包命令以免误连正式数据库。以上就是本篇文章的全部内容喜欢的话可以留个免费的关注呦~~~