如何配置Laravel Vite以将带版本号的静态资源复制到构建文件夹（避免Base64嵌入）

我明白你想要的效果：让Vite把图片作为单独文件复制到public/build/assets目录并添加哈希版本号，同时CSS里引用对应的带版本号的路径，而不是转成Base64。下面是具体的实现步骤：

1. 修改Vite配置文件 #

在项目根目录的vite.config.js中，调整build选项里的assetsInlineLimit，把它设置为0——这个参数控制的是“多大的资源会被转为Base64嵌入”，设为0就意味着所有资源都会以单独文件输出：

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,
        }),
    ],
    build: {
        assetsInlineLimit: 0, // 关键配置：禁用Base64嵌入所有资源
        assetsDir: 'assets' // 确保资源输出到build/assets目录，这也是Laravel Vite的默认设置，可按需调整
    }
});

2. 确认资源引用路径正确 #

你已经做了这一步，但再确认下：在resources/css/app.css里的图片引用路径要相对于当前CSS文件。比如你的图片放在resources/img/icons/arrow.png，CSS在resources/css/app.css，那么引用路径应该是：

.arrow { 
    background-image: url('../img/icons/arrow.png'); 
}

这个相对路径会让Vite正确识别资源，并在打包时保留原目录结构（输出到public/build/assets/img/icons/arrow.xxxxxx.png）。

3. 清理旧构建文件并重新打包 #

先删除public/build目录，避免旧文件干扰，然后执行打包命令：

npm run build

执行完成后，你会看到public/build/assets/img/icons目录下出现带哈希版本号的图片文件，同时编译后的CSS里的引用路径会自动替换为：

.arrow { 
    background-image: url('/build/assets/img/icons/arrow.xxxxxxxxxx.png'); 
}

额外注意事项 #

• 如果你的图片路径是绝对路径（比如/img/icons/arrow.png），Vite可能不会把它当作项目内资源处理，所以一定要用相对路径引用资源。
• 如果你只想针对特定大小的图片禁用Base64，可以把assetsInlineLimit设为具体的字节数（比如4096表示4KB以下的资源才转Base64），而不是0。

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