在 Vue 项目完成打包部署后，页面中引用的静态图片资源出现了加载失败的情况，针对这一现象，应当如何排查并解决？请给出具体的处理思路与配置调整方法。
考察说明
考察候选人定位 Vue 打包后静态资源路径错误并依据构建配置与部署环境给出解决方案的能力。
回答思路
- 【回答框架 1】首先明确问题根因：Vue CLI 默认将静态资源路径设为绝对路径 /，若部署在子路径或直接以 file 协议打开时，该路径无法定位资源，导致图片 404。需要区分开发与生产环境，观察控制台请求的 URL 与文件实际位置是否匹配。
- 【回答框架 2】解决路径问题：在 vue.config.js 中设置 publicPath 为相对路径 './'，使打包后资源引用以相对路径展开，适配子目录部署。同时需检查项目内 CSS、JS 中引用的图片路径，使用 require 或 import 引入资源，确保 Webpack 能正确处理并输出指纹文件。
- 【回答框架 3】若图片存放于 public 目录，部署时应保持其位于服务器根路径或与 index.html 相对位置一致，避免引用错误；若为动态拼接的图片路径，需调整拼接逻辑，使用相对路径或根据环境变量动态设置 baseURL。
- 【回答框架 4】进一步排查服务器配置：确认静态资源 MIME 类型正确，Nginx 等服务器未对图片请求做重写或拦截，并检查缓存策略是否导致旧文件被反复加载，必要时更新文件名或配置强制刷新。
- 【回答框架 5】最后建议在构建后本地预览产物目录，通过 http 服务验证资源可达性，并配合网络面板确认请求状态，快速定位是路径、部署还是缓存问题。
- 【关键点 1】publicPath 设置为 './' 是解决子路径部署下资源失效的常用手段。
- 【关键点 2】public 目录下的资源应以根路径或相对 index.html 的路径引用，不经过 Webpack 处理。
- 【关键点 3】动态图片路径需经 require 或 import 处理，或使用变量拼接环境相关的基础路径。
- 【关键点 4】部署后需检查服务器 MIME 类型与缓存配置对图片访问的影响。
- 【易错点 1】仅修改 publicPath 但未处理 CSS 内 url() 相对路径，可能导致样式背景图仍失效。
- 【易错点 2】将 public 目录资源以绝对路径硬编码，在子目录部署时必然 404。
- 【易错点 3】混淆开发与生产环境路径，忽略开发服务器代理设置对构建产物的影响。