Vite と Laravel 10 に画像付きの Vue コンポーネントを含める方法

Question

私の Vue コンポーネント (例: Login.vue) では、img タグを使用して画像を表示します。

リーリー

その後、ターミナルで npm run dev を実行すると、すべてが正常に動作し、画像も正常に表示されます。

ここで npm run build を実行すると、次のエラーが表示されます:

[vite]: ロールアップは、「C:/Users/Ali/Desktop/Projects/ajorplus/resources/js/Pages/Auth/Login.vue」からインポートされた「/assets/img/logo.png」を解析できません。 これは実行時にアプリケーションを破壊する可能性があるため、意図したものではない可能性が高くなります。 このモジュールを本当に外部化したい場合は、明示的に build.rollupOptions.external に追加してください。 エラー: エラー: [vite]: ロールアップは「C:/Users/Ali/Desktop/Projects/ajorplus/resources/js/Pages/Auth/Login.vue」からインポートされた「/assets/img/logo.png」を解析できません。 これは実行時にアプリケーションを破壊する可能性があるため、意図したものではない可能性が高くなります。 このモジュールを本当に外部化したい場合は、明示的に build.rollupOptions.external に追加します。 viteWarn 内 (file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/vite/dist/node/chunks/dep-abb4f102.js:48051:27) onRollupWarning (file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/vite/dist/node/chunks/dep-abb4f102.js:48083:9) onwarn 内 (file:///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 内 (file:///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

私が見つけた問題の 1 つは、画像アセットをバンドルするために「絶対パス」を使用しようとしていることです。パスはバックスラッシュで始まります。src="/assets/img/logo.png" 。したがって、ビルドには含まれません。パブリック ファイルまたはパブリック ファイル内のファイルにリソースを自分で含めることも、相対パスを使用してリソースを参照することもできます (パスをバックスラッシュで始めないでください)。

参照: Laravel 10 ドキュメント #URL 処理

文書には次のように記載されています:

```html