如何在Vite和Laravel 10中包含图像的Vue组件

Question

在我的Vue组件中，例如Login.vue，我使用了一个img标签来显示一张图片：

<img class="logo-img" src="/assets/img/logo.png" alt="...">

然后在终端中运行npm run dev，一切都正常工作，图片也能正常显示。

现在当我运行npm run build时，我遇到了以下错误：

[vite]: Rollup无法解析从"C:/Users/Ali/Desktop/Projects/ajorplus/resources/js/Pages/Auth/Login.vue"导入的"/assets/img/logo.png"。 这很可能是意外的，因为它可能会在运行时破坏您的应用程序。 如果您确实想要将此模块外部化，请将其明确添加到build.rollupOptions.external错误中：错误： [vite]: Rollup无法解析从"C:/Users/Ali/Desktop/Projects/ajorplus/resources/js/Pages/Auth/Login.vue"导入的"/assets/img/logo.png"。 这很可能是意外的，因为它可能会在运行时破坏您的应用程序。 如果您确实想要将此模块外部化，请将其明确添加到build.rollupOptions.external 在 viteWarn （文件:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/vite/dist/node/chunks/dep-abb4f102.js:48051:27） 在 onRollupWarning （文件:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/vite/dist/node/chunks/dep-abb4f102.js:48083:9） 在 onwarn （文件:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/vite/dist/node/chunks/dep-abb4f102.js:47814:13） 在文件:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:24070:13 在 Object.logger [as onLog] (file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:25742:9) 在 ModuleLoader.handleInvalidResolvedId （文件:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:24656:26） 在文件:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:24616:26

为什么当我运行npm run dev时一切正常，但当我运行npm run build时却遇到了这个错误？我该如何解决这个问题？

Answer 1

我发现的一个问题是，你试图使用“绝对路径”来捆绑你的图像资源：你用反斜杠开头的路径，src="/assets/img/logo.png"。因此，它不会被包含在构建中。你可以自己将资源包含在公共文件或者公共文件的一个文件中，或者使用相对路径来引用资源（不要以反斜杠开头的路径）。

参考： Laravel 10 文档 #URL 处理

文档中写道：

```html