javascript - vue.js 배포에서 발생하는 이미지 경로 문제

Question

vue.js 프로젝트를 패키징하고 배포하기 위해 cnpm run build 명령줄을 사용할 때 이 문제가 발생했습니다. 도움을 요청하세요 T T

먼저 백그라운드 tomcat은 Application context가 xxx로 구성되어 있으므로 서버의 루트 경로는 http://localhost:8080/xxx

가 됩니다.

이제 이미지를 <img src="../../assets/ad.png">로 설정하세요
패키징 및 배포 후에는 이미지를 표시할 수 없으며 요소를 볼 때 <img src가 됩니다. ="/static/img/ ad.22bf537.png">
오류 보고서를 로드할 수 없습니다. http://localhost:8080/static/...

경로를 <img src="./static/img/ad.22bf537.png">로 직접 변경하면 표시됩니다

그렇다면 포장하기 전에 이 문제를 어떻게 해결해야 할까요?

Answer 1

vue-cli의 스캐폴딩은 기본적으로 프로덕션 환경 프로젝트에 따라 구축됩니다. 이는 대략 특정 프로젝트 아래의 작은 모듈이 아닌 직접 프로젝트를 구축하는 것을 의미합니다. 따라서 일반 웹사이트에서는 웹사이트의 루트 디렉터리에 static을 배치합니다. 빌드 후 생성된 dist 디렉터리를 열 수 있습니다. 내부 구조는 다음과 같습니다.

그러면 문제를 해결하는 방법은 두 가지뿐입니다:

• 최종 리소스 위치를 수정합니다. 예를 들어 프로젝트 루트 디렉터리에 static을 넣습니다.

• 페이지의 리소스에 대한 참조 링크 수정

첫 번째는 설명할 필요 없이 디렉토리 위치만 옮겨주시면 됩니다.

두 번째 방법은 여러 가지가 있지만 웹팩의 구성을 수정하여 목표를 달성하는 것이 가장 좋습니다. 웹팩 설정 파일을 자세히 살펴보시는 걸 추천드려요~

assetPublicPath를 /public/으로 변경하면 출력 index.html의 리소스 링크가 변경되었습니다.

단순히 문자열을 일치시킨 다음 바꾸는 string-replace-loader을 사용하는 또 다른 보편적인 방법이 있습니다. 자세한 지침은 여기를 참조하세요.

도움이 되었기를 바랍니다.

Answer 2

또는 이미지 경로('사진 경로')를 img의 src로 설정하는 방법도 있습니다