从 npm run build 到生产上线VuePack 生产构建优化与部署清单【免费下载链接】vuepack:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)项目地址: https://gitcode.com/gh_mirrors/vu/vuepackVuePack 是一个现代化的 Vue 2 起步模板内置 Vuex、Vue-router 和 Webpack 2开箱即用地帮你完成从npm run build生产构建到线上部署的全过程。这篇文章带你快速看懂 VuePack 生产构建优化都做了哪些事并附上一份可直接照做的部署检查清单10 分钟搞定上线前的最后一关。一条命令完成生产构建在生成的项目里构建命令已经预置在 template/package.json 中npm run build它实际执行的是webpack --config build/webpack.prod.js由 template/build/webpack.prod.js 驱动整个生产流程。构建完成后默认模式产物输出到项目根目录的./dist开启 Electron 模式产物输出到./app/dist 每次构建前VuePack 会用 rimraf 自动清空旧产物目录保证dist里永远是干净、完整的发布文件无需手动清理。VuePack 内置的 6 项生产构建优化打开 template/build/webpack.prod.js你会发现生产环境已默认启用以下优化这也是 Webpack 生产优化清单的核心项优化项实现方式收益1. 代码压缩UglifyJsPlugin去掉注释并压缩JS 体积显著减小2. 长期缓存文件名带[chunkhash:8]内容哈希内容不变则浏览器命中缓存3. 第三方库拆分CommonsChunkPlugin 抽出vendor与manifest两个 chunk业务代码更新不影响依赖缓存4. CSS 独立提取ExtractTextPlugin 生成styles.[contenthash:8].css样式可并行加载、可缓存5. PWA 离线能力OfflinePlugin 生成 Service Worker页面支持离线访问6. 环境标识注入DefinePlugin 注入process.env.NODE_ENV productionVue 等库自动走生产分支去掉调试逻辑其中几个值得新手注意的细节长期缓存template/build/webpack.prod.js 中把输出文件名改为[name].[chunkhash:8].js样式文件同样带 contenthash这正是实现内容变、文件名变、缓存失效的标准做法。性能提示template/build/webpack.base.js 在生产环境下启用了 performance hints 告警当某个 chunk 过大时控制台会给出体积警告方便你及时发现胖包。Source MapWeb 模式的生产构建会附带 source-map便于线上排查报错Electron 模式则不生成。PWA 离线OfflinePlugin 只在生产环境生效开发环境不会干扰调试详细说明见 docs/pwa.md 和 template/client/pwa.js。构建产物长什么样dist/ ├── index.html # HtmlWebpackPlugin 生成的入口页 ├── app.[chunkhash:8].js # 业务代码 ├── vendor.[chunkhash:8].js ├── manifest.[chunkhash:8].js ├── styles.[contenthash:8].css └── static/... # static/ 目录整体复制而来入口 HTML 由 template/build/index.html 模板生成想自定义标题、meta 信息直接改这个模板即可。项目根目录static/下的文件如 template/static/favicon.ico会被 CopyWebpackPlugin 原样复制到dist根目录静态资源使用方式见 docs/static-files.md。部署前必做的 3 项配置1. 检查 publicPath 静态资源路径这是最容易踩坑的一项。在 template/build/config.js 中普通 Web 部署保持/即可站点根路径部署部署在子路径或 CDN改为对应绝对路径如/my-app/Electron 模式使用相对路径./publicPath配错上线后页面白屏、图片和 JS 404 基本都是它引起的。2. 确认 SPA 路由回退如果你使用 history 模式刷新子路由如/about时服务器必须把未匹配的路径全部回退到index.html。以 Nginx 为例location / { try_files $uri $uri/ /index.html; }3. 验证 Service Worker 离线缓存开启 PWA 的项目部署后请用飞行模式或 DevTools 断网刷新页面确认离线缓存生效。若不需要离线能力按 docs/pwa.md 中的说明移除对应配置即可。✅ 生产部署检查清单按顺序勾选逐项核对后再点发布本地执行npm run build无报错且无 performance 体积告警dist/中同时存在带 hash 的 JS、styles.*.css和index.htmlpublicPath与目标部署路径一致服务器已配置 history 路由回退到index.html线上访问页面Network 面板中 JS/CSS 返回了正确缓存头刷新子路由不出现 404可选断网验证 Service Worker 离线缓存结语VuePack 把压缩、长期缓存、vendor 拆分、CSS 提取和 PWA 离线这些 Webpack 生产优化默认做全你只需要关注config.js里的publicPath和服务端的路由回退两件事。照着上面的清单逐项打勾npm run build之后你的 Vue 应用就能稳稳地上线了。更多构建细节可参考模板目录 template/build/ 下的配置文件或完整文档 README.md。【免费下载链接】vuepack:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)项目地址: https://gitcode.com/gh_mirrors/vu/vuepack创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考