Vite 및 Laravel 10에 이미지의 Vue 구성 요소를 포함하는 방법

Question

내 Vue 구성 요소(예: Login.vueLogin.vue，我使用了一个img)에서 img

태그를 사용하여 이미지를 표시합니다.

으아아아 npm run dev그런 다음 터미널에서 실행

하면 모든 것이 정상적으로 작동하고 사진도 정상적으로 표시됩니다.

npm run build이제 실행하면

다음 오류가 발생합니다.

build.rollupOptions.external[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"를 구문 분석할 수 없습니다. 이는 런타임 시 애플리케이션을 중단시킬 수 있으므로 의도하지 않은 것일 가능성이 높습니다. 이 모듈을 실제로 외부화하려면

에 명시적으로 추가하세요. 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에서 [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