必须将 connect-history-api-fallback 中间件置于 express.static 之前，否则静态资源未命中时直接返回 404，fallback 无法捕获请求；它能统一处理 favicon.ico 等资源请求，而 app.get('*') 不能，且调试时需确保 launch.json 的 program 指向可独立运行的 server.js。
History 模式下刷新页面 404，不是前端代码写错了，是服务端没兜住 —— VSCode 调试时必须让本地 Node 服务能正确 fallback 到 index.html，否则断点进得去、页面却白屏。
为什么 connect-history-api-fallback 必须放在 express.static 前面
Express 中间件顺序决定请求流向。如果 express.static('./dist') 先执行，遇到 /user/profile 这类不存在的路径会直接返回 404；而 connectHistoryApiFallback() 的作用就是捕获所有未命中静态文件的 GET 请求，并统一返回 index.html，让前端路由接管。顺序反了，fallback 就失效。
-
app.use('/', connectHistoryApiFallback())必须在app.use(express.static('./dist'))之前 - 不要加
app.get('*', ...)替代 —— 它无法处理 favicon.ico、manifest.json 等资源请求，容易导致控制台报错干扰调试 - 若用
http-server或serve，它们不支持 fallback，调试时务必换回 Express +connect-history-api-fallback
launch.json 中 program 指向的是 Express 入口，不是 Vue 主文件
你调试的目标是 Node 服务本身，不是 main.js 或 router/index.js。断点要设在 app.js 或 server.js 里，比如 app.get('/', ...) 或 app.use(...) 行上，才能观察到请求是否被正确拦截。
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
- 错误写法：
"program": "${workspaceFolder}/src/main.js"（这是 Vue 入口，Node 跑不起来） - 正确写法：
"program": "${workspaceFolder}/server.js"或"program": "${workspaceFolder}/app.js" - 确保该文件能独立运行：
node app.js在终端中不报错，且访问http://localhost:3000/user返回index.html内容
调试时刷新页面仍 404？先查三件事
不是代码没生效，而是请求根本没走到你的 Express 逻辑里 —— 很可能被 VSCode 或浏览器缓存、或前置代理劫持了。
- 打开 Chrome DevTools → Network 标签，刷新页面，看
/user/profile请求的状态码：如果是200但内容是 404 HTML，说明 Express 返回了错误页，检查app.use(express.static('./dist'))路径是否拼错（比如写成'./public'却把文件放在dist） - 如果是
net::ERR_CONNECTION_REFUSED，说明 VSCode 没真正启动服务 —— 检查launch.json是否选中了正确的 configuration，且绿色 ▶️ 按钮旁显示 “Launch Program” 而不是灰掉 - 如果状态码是
304或响应头含X-Content-Type-Options: nosniff，可能是旧版connect-history-api-fallback（^2.0.0 并确认index选项设为'index.html'
Vue Router 的 base 和打包路径必须与服务端一致
哪怕调试配置全对，router 实例里的 base 和 vue.config.js 的 publicPath 对不上，JS 加载的资源路径就会错，导致白屏或 404 —— 这时候断点还在，但页面根本渲染不出来。
- 开发调试时推荐统一用
publicPath: '/'，router中base: '/'，服务端express.static('./dist')直接挂载根路径 - 如果打包输出目录是
dist/myapp/，则publicPath: '/myapp/'，base: '/myapp/'，服务端需写app.use('/myapp', express.static('./dist/myapp')) - 千万别在
base里写'./'—— History 模式不支持相对 base，会触发浏览器地址栏降级为 Hash 模式
History 模式的服务端 fallback 看似简单，但路径、中间件顺序、Vue 配置三者只要一个脱节，调试时就只能看到白屏和 404 —— 它不像 console.log 那样有即时反馈，问题往往藏在请求链路的某个静默环节里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
