Laravel+Inertia+Vue项目中vite-plugin-favicons-inject路径错误排查

在Laravel+Inertia+Vue项目中使用vite-plugin-favicons-inject插件时，项目根目录下的vite.config.js配置如下：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import vitePluginFaviconsInject from 'vite-plugin-favicons-inject';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        vitePluginFaviconsInject('resources/img/logo/rosesefid.png'),
    ],
});

构建时出现错误：

error during build:
Error: NO_FILES_FOUND
    at Object.closeBundle (C:\laragon2\www\alomoshaver\node_modules\vite-plugin-favicons-inject\dist\cjs\index.js:94:15)
    at file:///C:/laragon2/www/alomoshaver/node_modules/rollup/dist/es/shared/node-entry.js:24343:40
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async PluginDriver.hookParallel (file:///C:/laragon2/www/alomoshaver/node_modules/rollup/dist/es/shared/node-entry.js:24271:9)
    at async Object.close (file:///C:/laragon2/www/alomoshaver/node_modules/rollup/dist/es/shared/node-entry.js:25573:13)
    at async build (file:///C:/laragon2/www/alomoshaver/node_modules/vite/dist/node/chunks/dep-ca21228b.js:44680:13)
    at async CAC.<anonymous> (file:///C:/laragon2/www/alomoshaver/node_modules/vite/dist/node/cli.js:813:9)

已尝试以下路径，均未解决问题：

• ../img/logo/rosesefid.png
• ./resources/img/logo/rosesefid.png
• /resources/img/logo/rosesefid.png

请问该插件配置中logo的正确路径应该是什么？

核心路径规则 #

插件的路径解析基于Node.js的当前工作目录（即你执行npm run build的项目根目录），resources/img/logo/rosesefid.png本身是正确的相对路径写法，报错NO_FILES_FOUND通常是以下原因导致，按优先级排查：

1. 验证文件真实存在性

   • 确认项目根目录下确实存在resources/img/logo/rosesefid.png文件
   • 检查文件名/目录名的大小写（Windows系统不区分，但插件内部文件检查可能区分大小写）

2. 尝试对象形式配置路径
   部分版本的插件更兼容对象参数格式，明确指定logo路径：

   vitePluginFaviconsInject({
     logo: 'resources/img/logo/rosesefid.png'
   }),
   

3. 使用磁盘绝对路径测试
   如果相对路径始终失效，直接传入磁盘绝对路径排除路径解析问题：

   vitePluginFaviconsInject('C:/laragon2/www/alomoshaver/resources/img/logo/rosesefid.png'),
   

4. 确认Vite工作目录
   确保执行构建命令时的当前目录是项目根目录（C:\laragon2\www\alomoshaver），如果在子目录运行，需要调整路径为相对当前子目录的写法。

额外排查步骤 #

• 清理Vite缓存：删除项目根目录下的node_modules/.vite文件夹后重新构建
• 升级插件版本：执行npm update vite-plugin-favicons-inject，旧版本可能存在路径解析bug

内容的提问来源于stack exchange，提问作者A.Dadkhah