laravel vite `npm run build` issue

Question

我正在做一个laravel10/ve3项目。我使用npm run dev来编译资产，一切似乎都很好。我试图运行npm run build第一次，我得到了这个错误:

[vite]: Rollup failed to resolve import "/icons/coreui.svg" from "C:/xampp/htdocs/project/resources/js/layouts/Product/Update.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`
error during build:
Error: [vite]: Rollup failed to resolve import "/icons/coreui.svg" from "C:/xampp/htdocs/project/resources/js/layouts/Product/Create.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时，我没有得到这个错误，图标正确显示。

<svg class="me-1 mb-1" width="20" height="20">
<use xlink:href="/icons/coreui.svg#cil-save"></use>
</svg>

vite.config.js:

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

export default defineConfig({
plugins: [
vue(),
laravel({
input: [
'resources/sass/app.scss',
'resources/sass/style.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
});

编辑:图标位于公共旅游目录public/icons/coreui.svg

Answer 1

您可以通过更改vite来解决这个问题。配置js。当你在vite.config.js中配置模板编译器时，请尝试添加选项"transformAssetUrls"

该选项用于配置编译器如何处理模板中的url。

例如:

vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),

Answer 2

由于core .svg文件位于public/icons/目录中。在Vue组件中导入文件时，应该使用如下的相对路径../public/icons/coreui.svg

<svg class="me-1 mb-1" width="20" height="20">
<use xlink:href="../public/icons/coreui.svg#cil-save"></use>
</svg>