如何使Laravel-Vite复制静态资产版本到构建文件夹

Question

我正在尝试Laravel Vite，但似乎不知道如何让构建命令移动静态资产。相反，它嵌入图像"；在"；css文件通过base64。

到目前为止，我已经发现您需要参考相对于源.css/.scss文件的图像。

类似于/resources/app.css；

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

当我运行npm run build时，最终结果是一个css文件，其中包含作为base64的图像；

.arrow {
background-image: url(data:image/png;base64,xxxxxxxxxxxxxxxxxxxx);
}

然而，我想要的最终结果是，Vite将把那个精确的图像复制并版本化为/public/build/assets/img/icons/arrow.xxxxxxxxxx.png，处理后的css将是；

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

Answer 1

想明白了。事实证明，这实际上是Vite内联图像<默认情况下为4kb。可以通过定义build.assetsInlineLimit来覆盖设置

export default defineConfig({
build: {
assetsInlineLimit: 0,
},
plugins: [
laravel([
'resources/css/app.scss',
]),
],
});

如文件中所述；

字节数小于assetsInlineLimit选项的资产将内联为base64数据URL。

https://vitejs.dev/guide/assets.html

https://vitejs.dev/config/build-options.html#build-资产限额