Vite运行构建命令时找不到图像

Question

我目前有一个使用 Vite 的 Laravel 应用程序，并且我一直在使用 Vue 和 Inertia.js 开发它。我在我的应用程序中使用了图像，到目前为止，使用npm run dev. 那里没有错误。

但是，一旦我运行npm run buildVite，就无法找到我在 Vue 文件中使用的图像，并出现以下错误：

错误

[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`

我确信提供的路径是正确的，在npm run dev. 我正在使用的文件的示例：

Vue 文件中的图像导入（list.vue）

<template>
<img class="more-information" src="/images/diensten/pakketten/question-circle.svg" alt="question" />
</template>
.... // Further Vue script files etc.

Vite.config.ts

[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`

不幸的是，在我的本地计算机上运行相同的构建命令给出了相同的结果。这是我的 Vite 配置中的配置错误吗？我认为这与 Vite 试图找到图像文件有关，但在构建时无法找到它（不应该，因为这些图像是通过网络抓取到我的公共文件夹中的）。感谢您提前提供的任何帮助。

Answer 1

我已经设法找到解决这个问题的方法。问题是因为 Vite 正在寻找图像的绝对路径，而编译时不应该这样做。

下面需要使用 Vue 代码来忽略这些图像绝对值。之后应该可以正常工作。

vite.config.js

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({
            // This is needed, or else Vite will try to find image paths (which it wont be able to find because this will be called on the web, not directly)
            // For example <img src="/images/logo.png"> will not work without the code below
            template: {
                transformAssetUrls: {
                    includeAbsolute: false,
                },
            },
        }),
        laravel({
            postcss: [tailwindcss(), autoprefixer()],
        }),
    ],
});