Laravel+Vue2项目本地环境.svg文件无法显示 测试服务器可正常展示

先打开浏览器开发者工具的「Network」面板，刷新页面后找到对应svg文件的请求，根据返回状态码定位问题：

状态码404相关原因 #

• 本地.env文件中APP_URL配置与实际访问地址不匹配
  asset()函数生成路径时会读取APP_URL参数，若你本地访问项目地址为http://localhost:5173，但.env中APP_URL填写为http://localhost或者其他测试服地址，生成的资源路径就会错误。需要将APP_URL修改为你本地实际访问项目的完整地址（包含端口）。
• 前后端分离开发模式下代理配置缺失
  如果你的Vue开发服务和Laravel服务跑在不同端口，本地请求静态资源时没有配置代理转发到Laravel服务的public目录，也会触发404。需要在Vue的vite.config.js或vue.config.js中配置静态资源路径的代理规则，将/images开头的请求转发到Laravel服务地址。

状态码403相关原因 #

• 本地svg文件权限不足
  检查项目public/images目录下的svg文件权限，确保本地运行的web服务（Nginx/Apache/Artisan serve）有该文件的读取权限。

状态码200但svg不显示相关原因 #

• 本地服务未配置正确的svg MIME类型
  查看该请求的响应头，若Content-Type不是image/svg+xml，说明本地web服务没有配置svg的MIME映射：
  • 用artisan serve启动服务的话，先执行php artisan config:clear清除配置缓存，再重启服务
  • 用自定义Nginx/Apache的话，在服务配置文件中添加svg的MIME类型规则，重启服务生效

通用排查操作 #

先执行以下命令清除本地缓存后重试：

# 清除Laravel缓存
php artisan config:clear
php artisan view:clear
# 清除前端构建缓存
rm -rf node_modules/.cache
# 重启前端开发服务和Laravel服务

内容的提问来源于stack exchange，提问作者blue pine