Laravel + ViteJS环境下CSS背景图片路径问题求助

方法一：配置Vite服务器的Origin #

修改项目根目录下的vite.config.js，指定Vite服务器的资源请求源为Laravel的端口：

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,
        }),
    ],
    server: {
        origin: 'http://localhost:8000', // 让Vite生成的资源URL指向Laravel端口
    },
});

修改后重启Vite开发服务，CSS中的绝对路径资源会自动指向8000端口，无需修改原有CSS代码。

方法二：使用Laravel的asset辅助函数生成正确URL #

如果你的CSS代码是在Blade模板中编写（或通过Blade渲染），可以直接用asset()函数生成资源的完整URL：

background-image: url('{{ asset('assets/back.png') }}');

这种方式会直接生成指向Laravel public目录的正确路径，不受Vite端口影响。

方法三：调整CSS中的路径为相对引用（需移动图片位置） #

若愿意将图片从public/assets移到resources/assets目录下，可在CSS中使用相对路径引用：

background-image: url('../assets/back.png');

Vite会自动处理该资源的路径映射，开发环境下正常加载。

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