企业官网建设流程全解析

从 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/vuepack

VuePack 是一个现代化的 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 生产优化清单的核心项：

其中几个值得新手注意的细节：

• 长期缓存：template/build/webpack.prod.js 中把输出文件名改为[name].[chunkhash:8].js，样式文件同样带 contenthash，这正是实现"内容变、文件名变、缓存失效"的标准做法。
• 性能提示：template/build/webpack.base.js 在生产环境下启用了 performance hints 告警，当某个 chunk 过大时控制台会给出体积警告，方便你及时发现"胖包"。
• Source Map：Web 模式的生产构建会附带 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.html
• publicPath与目标部署路径一致
• 服务器已配置 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