Laravel 9部署后CSS/JS加载失败但图片可正常加载问题求助

一、Vite生成的JS/CSS资源无法访问（缺少public前缀） #

问题原因 #

服务器将项目根目录设为站点根，而非Laravel默认的public目录，Vite默认生成的资源路径相对站点根，导致请求/build/assets/xxx时，即便有.htaccess转发规则，也因Vite配置未匹配服务器结构，出现路径不匹配的情况。

解决方案 #

方案1：修改Vite配置添加资源前缀

在项目根目录的vite.config.js中添加base配置，指定资源基础路径：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    base: '/public/',
});

修改后执行npm run build重新生成静态资源，@vite()生成的链接会自动带上public前缀，无需手动调整即可访问。

方案2：确保.htaccess重写规则生效

确认.htaccess放在项目根目录，且服务器已启用mod_rewrite模块。若规则未生效，可调整为：

<IfModule mod_rewrite.c>
    RewriteEngine On
    # 跳过已存在的文件/目录请求
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    # 转发非public开头的请求到public目录
    RewriteCond %{REQUEST_URI} !^public/
    RewriteRule ^(.*)$ public/$1 [L,QSA]
</IfModule>

添加!-f和!-d条件可避免重写已存在的静态资源请求，确保转发规则正确触发。

二、public/images下SVG加载失败但WEBP正常 #

问题原因 #

服务器未配置SVG的MIME类型，导致返回错误的Content-Type（如text/plain），浏览器无法正确识别解析；而WEBP的MIME类型通常已被服务器默认支持。

解决方案 #

在项目根目录或public目录的.htaccess中添加SVG的MIME类型配置：

AddType image/svg+xml .svg .svgz

添加后重启服务器或刷新配置，浏览器即可正确识别SVG文件的Content-Type并加载。

额外排查方向：

• 确认SVG文件本身无损坏，可直接访问文件路径测试
• 清除浏览器缓存后重新加载页面
• 检查SVG文件权限与WEBP一致（通常为644）

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