Laravel构建后Vite无法找到图片清单的问题排查

问题情况 #

用Blade做UI开发Laravel 9应用，图片存在resources/images目录，Blade里用<img src="{{ Vite::asset('resources/images/logo.png') }}"/>引图片。开发模式一切正常，但执行npm run build构建完，用php artisan serve跑应用时就报错：

Unable to locate file in Vite manifest: /resources/images/logo.png.

查了生成的manifest.json，明明有这个图片的记录，却还是报错：

"resources/images/logo.png": {
    "file": "assets/logo-4ed993c7.js",
    "isEntry": true,
    "src": "resources/images/logo.png"
  },

当前配置文件 #

vite.config.js #

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

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

package.json #

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.13",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.4.21",
        "tailwindcss": "^3.2.4",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "alpinejs": "^3.12.0",
        "flowbite": "^1.6.4",
        "xlsx": "^0.18.5"
    }
}

问题原因 #

把图片直接加到了vite.config.js的input入口数组里，Vite会把图片当成JS模块来处理，构建后生成的是.js文件而不是图片资源，导致manifest里的记录异常，最终找不到正确的图片文件。

解决办法 #

方法1：移除图片入口（最直接） #

把vite.config.js里input数组中的resources/images/logo.png删掉：

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,
        }),
    ],
});

Blade里的图片引用方式不用改，Vite会自动识别并正确处理静态图片资源的构建和引用。

方法2：通过JS/CSS间接引入（适合代码中需要用到的场景） #

如果要在JS或CSS里用到这张图，别直接把图片当入口，而是在app.js或者app.css里引入：

• 在app.js里引入：

import '../images/logo.png';

• 或者在app.css里当背景图用：

.logo {
    background-image: url('../images/logo.png');
}

这样Vite会正确处理图片，生成对应的图片文件，manifest记录也会正常，不会报错。

方法3：指定静态资源目录（可选） #

如果需要单独管理图片目录，可以在vite.config.js里加个静态资源配置：

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

这个配置会让Vite把该目录下所有文件都识别成静态资源，构建时正常处理。

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