Laravel中如何让Vite忽略特定文件夹的资源打包处理

我有一个Laravel项目，图片存放在public/images文件夹中，可通过https://[domain]/images/[fileName]直接访问。在基于Vite构建的Vue组件中引用了该路径的图片：

<template>
  ...
  <img src="/images/[fileName]" />
  ...
</template>

执行yarn build构建文件时，出现Vite错误：

[vite]: Rollup failed to resolve import "/images/[fileName]" from "[projectRoot]/resources/js/VueComponent.vue".
This is most likely unintended because it can break your application at runtime.

我清楚Vite试图处理该文件，但找不到其位置来纳入输出文件夹，想知道如何配置Vite使其忽略该图片路径的资源打包。

方法1：配置Rollup忽略指定路径 #

在项目根目录的vite.config.js中，通过rollupOptions.external配置，让Rollup跳过对/images/开头路径的解析：

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

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    build: {
        rollupOptions: {
            external: [
                /^\/images\/.*/, // 匹配所有/images/开头的路径
            ],
        },
    },
});

正则表达式/^\/images\/.*/会匹配所有以/images/开头的资源路径，告诉Rollup不要尝试解析这些路径，直接保留原引用。

方法2：调整Vue模板的资源URL转换规则 #

如果方法1未生效，可修改Vue插件的transformAssetUrls配置，让Vite不对绝对路径的图片做解析处理：

vue({
    template: {
        transformAssetUrls: {
            includeAbsolute: false, // 禁用绝对路径的资源转换
        },
    },
}),

该配置会让Vite保留原src="/images/[fileName]"的引用，不会尝试去本地查找对应文件。

方法3：用环境变量拼接路径（可选） #

也可以通过环境变量定义图片基础路径，避免Vite解析本地路径：

1. 在项目根目录的.env文件中添加：

VITE_IMAGE_BASE_URL=/images/

2. 在Vue组件中引用：

<template>
  ...
  <img :src="`${import.meta.env.VITE_IMAGE_BASE_URL}[fileName]`" />
  ...
</template>

这种方式Vite会将import.meta.env.VITE_IMAGE_BASE_URL替换为对应的值，不会把整个路径当作本地资源解析。

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