javascript - 이미지 경로 참조 문제

Question

사진 인용:

으아악

디렉토리 구조:

글은 상대적인 것인데 왜 그림이 표시되지 않나요?
콘솔 프롬프트:

웹팩:

으아악

찾은 이유:

으아악

Lu Jin은 dist에 상대적인 경로를 작성해야 합니다
하지만 이제 또 다른 문제가 있습니다! 이렇게 작성하면 사진이 프로덕션 환경에 표시되지 않습니다!
아래에서 언급한 것처럼 정적 리소스를 /dist에 넣을 계획은 없습니다. 정적 파일 방법에 대해 webpack을 구성해야 하는데 누구나 공유할 수 있나요?

Answer 1

정적 리소스 문제가 해결되었습니다. 해결 방법:
웹팩 플러그인을 사용하여 프로덕션 환경에서 컴파일할 때 /static 디렉터리의 파일을 /dist 디렉터리로 복사할 수 있습니다. 으아악

개발 중 Webpack-devserver 구성:

으아악

이런 식으로 코드에 절대 경로 /static/..만 작성하면 됩니다

Answer 2

img를 작성한 파일은 어디에 있나요? "../assets/image/setting.png"는 img를 작성한 파일이 구성 요소 디렉터리에 있는 경우에만 유효합니다.

Answer 3

vue-cli의 webpack 템플릿을 사용하면 다음과 같은 절대 경로로 변환됩니다. /images/setting.png이미지를 static 폴더에 넣는 것이 좋습니다.

Answer 4

고정 경로는 모두 /static 아래에 배치됩니다. 패키징 전후 위치가 변경되지 않는 유일한 곳입니다