Laravel+Sail+Vite环境下CSS图片路径访问问题求助

在Laravel 10.7.1（PHP 8.2.5）+ Sail的全新默认安装环境中，设置CSS的background-image时遇到以下问题：

• 执行sail npm run build生产构建后，图片显示正常
• 运行sail npm run dev开发模式时，图片路径失效

相关代码 #

welcome.blade.php

<head>
   @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

app.css

.test {
    background: url('../../storage/images/bg1.jpg');
    width: 100%;
    height: 200px;
}

问题细节 #

• CSS文件可通过http://0.0.0.0:5173/resources/css/app.css访问
• 开发模式下图片请求路径为http://0.0.0.0:5173/storage/images/bg1.jpg，但该路径无法访问，图片仅能在80端口（Laravel应用端口）访问

解决方案 #

方案1：使用Vite资源别名（推荐） #

在项目根目录的vite.config.js中添加别名配置，将storage目录映射到正确的URL：

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,
        }),
    ],
    resolve: {
        alias: {
            '@storage': '/storage',
        },
    },
});

修改CSS中的路径：

.test {
    background: url('@storage/images/bg1.jpg');
    width: 100%;
    height: 200px;
}

Vite在开发模式下会自动解析别名，指向80端口的/storage/images/bg1.jpg。

方案2：使用绝对路径 #

直接在CSS中使用Laravel应用的绝对路径，开发和生产环境均适用：

.test {
    background: url('/storage/images/bg1.jpg');
    width: 100%;
    height: 200px;
}

方案3：配置Vite服务器代理 #

如果想保留相对路径，可在vite.config.js中配置代理，将/storage路径的请求转发到Laravel应用的80端口：

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: {
        proxy: {
            '/storage': {
                target: 'http://localhost',
                changeOrigin: true,
            },
        },
    },
});

配置后无需修改CSS中的相对路径，Vite会自动转发请求到正确端口。

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