如何在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