Vue 项目静态资源 404 问题排查
Vue 项目部署后静态资源 404 问题解析
在使用 Vue CLI 构建的项目中，本地开发环境运行 npm run dev 一切不会出现问题。但在服务器部署后，有时会遇到静态资源加载失败，浏览器控制台显示 404 错误。
问题原因
通常情况下，这是由于服务器配置或项目打包设置导致的路径问题。例如，服务器未配置正确的项目路径，或者打包过程中静态资源路径设置不正确。
解决方案
-
检查服务器配置:
- 确认服务器已正确配置项目路径。
- 如果使用 Nginx 等服务器，检查配置文件中的 location 和 root 指令是否指向正确的项目目录。
-
修改打包配置:
- 检查 Vue 项目中的 vue.config.js 文件。
- 确保 publicPath 选项设置正确，它决定了静态资源的根路径。
- 可以将其设置为相对路径或绝对路径，具体取决于服务器配置。
示例
假设打包后的静态资源位于 deploy/static 目录下，可以将 publicPath 设置为 './deploy/static/'。
其他注意事项
- 清除浏览器缓存，确保加载最新的静态资源。
- 检查静态资源文件名是否正确，大小写是否敏感。
- 确保服务器具有访问静态资源目录的权限。
通过以上步骤，通常可以解决 Vue 项目部署后静态资源 404 的问题。
文件大小：267.14KB
评论区