Laravel 9 + Vite开发服务器下CSS绝对URL图片无法加载求助

问题原因 #

Vite开发服务器的根目录是项目根目录，而非Laravel的public目录。当你通过http://0.0.0.0:3000/img/...访问图片时，Vite会在项目根目录查找img文件夹，而非public/img，因此返回404。而{my_local}/img/...能正常访问是因为该地址由Laravel服务器提供，其根目录为public。

解决方案一：配置Vite代理请求到Laravel本地服务 #

通过Vite的代理功能，将/img等public目录下的资源请求转发到Laravel本地服务器：

修改vite.config.js：

export default defineConfig({
    server: {
        host: '0.0.0.0',
        port: 3000,
        open: false,
        proxy: {
            // 代理/img开头的请求到Laravel服务器
            '/img': {
                target: 'http://localhost:8000',
                changeOrigin: true,
            },
            // 若有其他public下的资源路径（如/storage），可按需添加
            '/storage': {
                target: 'http://localhost:8000',
                changeOrigin: true,
            }
        }
    },
    plugins: [
        vue(),
        laravel({
            input: [
                'resources/scss/app.scss',
            ],
            refresh: true,
        }),
    ],
});

使用步骤： #

1. 启动Laravel本地服务器：

php artisan serve

2. 启动Vite开发服务器：

npm run dev

此时访问http://0.0.0.0:3000/img/home/sweets-one.png时，Vite会自动将请求转发到Laravel服务器，即可正常加载图片。

解决方案二：修改CSS路径为相对路径（可选） #

若允许调整CSS中的路径，可将绝对路径改为相对于Vite入口文件的路径：

background-image: url('../../public/img/home/sweets-one.png');

这种方式下，Vite会在开发和生产构建时自动处理资源路径，但如果需要保持绝对URL的话，建议优先使用方案一。

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