vue 포장 후 정적 자원 이미지 의 실효 문 제 를 해결 합 니 다.

1.문제 설명
프로젝트 개발 에 있어 서 npm run build 를 통 해 압축 한 후에 파일 을 서버 에 놓 을 때 이미지 실효 문제 가 발생 합 니 다.콘 솔 에서 어떤 그림 을 찾 지 못 했 음 을 알려 줍 니 다(404 오류).이 그림 들 은 src 로 도 입 된 그림 일 수도 있 고 css 에서 정 의 된 배경 그림 일 수도 있 습 니 다.그림 은 정적 자원 파일 의 존재 위치 와 도 입 된 경로 와 직접적인 관 계 를 나 타 낼 수 있 습 니까?다음은 제 프로젝트 의 파일 저장 과 경로 작성 방식 입 니 다!
2.해결 방법 중 하나
정적 자원 static 저장 위 치 는 src 디 렉 터 리 에 놓 습 니 다.
 

src 디 렉 터 리 에 왜 넣 었 냐 고 물 어 볼 수도 있 습 니 다.src 와 같은 등급 의 디 렉 터 리 에 두 면 안 되 나 요?좋 습 니 다.처음에 저도 src 동급 디 렉 터 리 에 놓 았 지만 어떤 css 파일 에 배경 그림 을 도입 할 때 포장 한 후에 그림 이 효력 을 잃 었 습 니 다.저 는 이렇게 도 입 했 습 니 다.
 
실천 은 이 표기 법 이 틀 렸 다 는 것 을 증명 한다.이것 은 포장 할 때 바로 많은 실 수 를 안 을 것 이다(예 를 들 어 css-loader 오류).프로젝트 도 뛰 지 못 할 것 이다.
그래서 나 는 아래 의 문법 으로
 
이러한 쓰기 도 안 됩 니 다.정적 자원 파일 static 는 src 디 렉 터 리 에 없 기 때 문 입 니 다.vue 에 서 는 src 디 렉 터 리 가 상대 적 으로 루트 디 렉 터 리 가 src 디 렉 터 리 이기 때문에 위의 쓰기 방법 을 사용 하려 면 static 를 src 디 렉 터 리 에 두 어야 합 니 다.위의 그림 과 같이 1 도 2 도
메모:static/images/user.png 를/static/images/user.png 로 쓸 수 없습니다.그렇지 않 으 면 그림 이 효력 을 잃 습 니 다.
이상 은 파일 저장 위치 및 css 에 그림 을 도입 하 는 문제 입 니 다.img 탭 을 통 해 그림 을 도입 하면 상대 적 으로 간단 합 니 다.절대 주 소 를 직접 쓰 면 됩 니 다.또한 정적 자원 static 폴 더 의 위 치 는 src 에 있 을 수도 있 고 src 와 같은 등급 에 놓 을 수도 있 습 니 다.그러나 위의 상황 이 나타 나 지 않도록 src 에 넣 으 면 됩 니 다!
img 그림 도입:
 
이상 은 이미지 의 실효 문 제 를 해결 하 는 방법 입 니 다.물론 static 정적 자원 디 렉 터 리 를 src 와 같은 등급 디 렉 터 리 에 두 어야 한다 면 해결 방법 도 있 습 니 다.예 를 들 어 그림 을 가 져 오 는 방식(본인 이 실천 하지 않 음)을 통 해 스스로 시도 할 수 있 습 니 다!
vue 포장 을 해결 한 후에 정적 자원 이미지 가 효력 을 잃 는 문 제 는 바로 작은 편집 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.