在使用 Vue Router 的 history 模式进行生产环境部署时，需要关注哪些配置与操作要点？
考察说明
考察对 Vue Router history 模式原理及生产部署要点的掌握。
回答思路
- 【回答框架 1】history 模式基于 HTML5 History API，路由变化不触发页面刷新，但刷新或直接访问深层 URL 时，服务器需返回应用的入口 HTML（如 index.html），否则出现 404。因此核心是配置服务器端回退（fallback）到入口文件。
- 【回答框架 2】常见服务器配置：Nginx 使用 try_files $uri $uri/ /index.html；Apache 配置 FallbackResource；Node.js 使用 connect-history-api-fallback 中间件。注意要排除静态资源目录，避免错误回退。
- 【回答框架 3】若部署在子路径（如 /app/），需在 vue.config.js 设置 publicPath，并在 Vue Router 的 createWebHistory 传入 base 值，确保路径正确。
- 【回答框架 4】还需关注后端 API 与前端文件访问的区分，避免 catch-all 规则干扰接口请求，通常可配置对 /api 路径的代理或白名单。
- 【回答框架 5】上线前应测试直接访问深层路由和刷新操作，确保无 404，同时配合构建配置（如部署目录、CDN 场景）验证资源加载路径。
- 【关键点 1】服务器配置为所有前端路由返回 index.html 是核心，否则刷新或直接访问会 404。
- 【关键点 2】静态资源（JS、CSS）必须正确处理，避免回退规则错误匹配。
- 【关键点 3】子路径部署需同步设置 publicPath 和 createWebHistory 的 base 参数。
- 【易错点 1】误以为 history 模式无需服务器配置，导致部署后刷新 404。
- 【易错点 2】忽略静态资源目录排除，导致资源请求被错误回退到 index.html。
- 【易错点 3】子路径部署时 base 配置不一致，导致资源加载路径错误。