Vite执行build命令时无法找到图片的问题求助

开发环境执行npm run dev时图片显示正常，但执行npm run build时Vite报错无法找到Vue文件中引用的public目录下图片，错误信息如下：

[vite]: Rollup failed to resolve import "/images/diensten/pakketten/question-circle.svg" from "resources/views/pages/diensten/list.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

确认图片路径正确，文件存放在public/images/diensten/pakketten/question-circle.svg，相关代码示例如下：

Vue文件(list.vue)中的图片引用 #

<template>
<img class="more-information" src="/images/diensten/pakketten/question-circle.svg" alt="question" />
</template>
.... // 其他Vue脚本内容

Vite.config.ts配置 #

import { defineConfig } from 'vite'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import laravel from 'vite-plugin-laravel'
import vue from '@vitejs/plugin-vue'
import inertia from './resources/scripts/vite/inertia-layout'

export default defineConfig({
    plugins: [
        inertia(),
        vue(),
        laravel({
            
            postcss: [
                tailwindcss(),
                autoprefixer(),
            ],
        }),
    ],
})

解决方案 #

方案1：使用Laravel的asset函数生成合法路径 #

通过Inertia共享数据或全局变量传递asset基础路径，修改Vue组件中的图片引用：

<template>
<img class="more-information" :src="imagePath" alt="question" />
</template>

<script setup>
// 方式1：通过Inertia页面props获取
import { usePage } from '@inertiajs/vue3'
const imagePath = usePage().props.assetBase + '/images/diensten/pakketten/question-circle.svg'

// 方式2：在根blade模板中定义全局变量（如app.blade.php）
// <script>window.assetBase = "{{ asset('') }}"</script>
// 然后Vue中直接使用：const imagePath = window.assetBase + '/images/diensten/pakketten/question-circle.svg'
</script>

方案2：配置Vite忽略绝对路径的public资源 #

在vite.config.ts中添加Rollup配置，让其不解析/images/开头的绝对路径资源：

export default defineConfig({
    plugins: [
        inertia(),
        vue(),
        laravel({
            postcss: [
                tailwindcss(),
                autoprefixer(),
            ],
        }),
    ],
    build: {
        rollupOptions: {
            external: [
                /^\/images\/.*/, // 匹配所有/images开头的路径
            ],
        },
    },
})

方案3：调整资源目录使用相对路径导入 #

将图片移入resources/images目录，通过相对路径导入并配置Vite别名：

<template>
<img class="more-information" :src="questionIcon" alt="question" />
</template>

<script setup>
import questionIcon from '@/images/diensten/pakketten/question-circle.svg'
</script>

同时在vite.config.ts中添加别名配置：

import { defineConfig } from 'vite'
import { resolve } from 'path'
// ...其他导入

export default defineConfig({
    resolve: {
        alias: {
            '@': resolve(__dirname, 'resources'),
        },
    },
    // ...其他原有配置
})

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