vue css 가 asstes 의 그림 을 도입 하여 표시 할 수 없 는 네 가지 해결 방법

여기 서 주로 vuecli 2 의 일부 문 제 를 겨냥 하고 있다.
vue 프로젝트 에 많은 그림 자원 이 있 습 니 다.이러한 자원 저장 위 치 는 보통 두 가지 선택 이 있 습 니 다.1.static,2.assets
이 둘 사이 의 차이 와 여 기 를 어떻게 선택 하 는 지 에 대해 서 는 더 이상 말 하지 않 겠 습 니 다!
여기 서 assets 디 렉 터 리 에 그림 을 저장 할 때 vue 구성 요소 의 css 스타일 에 그림 을 도입 할 때 발생 하 는 문제 들 을 말 합 니 다!
정상 적 인 상황 에서 우리 가 현지에서 디 버 깅 을 개발 할 때 어떤 방식 으로 든 그림 을 도입 하 는 데 문제 가 없 을 것 이다.하지만 큰 가방 이 온라인 에 올 라 가면 그림 을 불 러 올 수 없 는 상황 이 발생 합 니 다!
이 는 어떤 이유 로 config 디 렉 터 리 에 있 는 index.js 파일 의 build 대상 중 assets PublicPath 의 값 을 수정 한 것 입 니 다.이 값 은 초기 화 할 때 경사 봉(/)으로 자원 루트 디 렉 터 리,즉 dist 디 렉 터 리 아래 index.html 파일 과 같은 등급 이기 때 문 입 니 다.
그래서:
첫 번 째 방법
복구 하 는 방법 은 이 값 을 기본 값 으로 바 꾸 는 것 입 니 다./

포 장 된 결과:css 파일 의 background 속성

index.html 의 js 와 css 파일

두 번 째 방법
아니면 이 값 의 슬 래 쉬 를 수정 하 는 것 은 루트 디 렉 터 리 를 대표 합 니 다.우 리 는 생각 을 바 꾸 면 이곳 을 절대 주소 로 할 수 있 습 니까?답 은 될 거 예요.구체 적 으로 어떻게 고 쳐 요?예 를 들 어 제 온라인 프로젝트 의 주 소 는 http://www.test.com 입 니 다.우 리 는 예전 의 평행봉 을 이 주소 로 바 꾸 면 됩 니 다.그림 과 같 습 니 다.

포 장 된 결과:css 파일 의 background 속성

index.html 의 js 와 css 파일

세 번 째 방법
위 에서 도 말 했 듯 이 어떤 원인 으로 인해 우 리 는 이 값 을 수 정 했 을 수도 있 습 니 다.원래 의 기능 에 영향 을 주지 않 고 다른 bug 를 만 들 지 않도록 우 리 는 이 값 을 수정 할 수 없 기 때문에 우 리 는 세 번 째 방법 이 있 습 니 다.build 디 렉 터 리 에 있 는 uitls 파일 의 css 패키지 설정 을 수정 하고 utils.js 파일 을 열 어 ExtractTextPlugin.extract 를 직접 검색 한 다음 대상 에 속성 publicPath:'.../../'구체 적 인 그림:

여기 의 등급(PublicPath:'.../.../')은 당신 이 포장 한 디 렉 터 리 구 조 를 구체 적 으로 보면 제 가 있 는 등급 은 아래 그림 과 같 고 각자 자신의 상황 에 따라 확정 합 니 다.

이 때 포 장 된 경 로 는 assets PublicPath 설정 에 따라 정 해 집 니 다.예 를 들 지 않 고 포장 이 정상 인지 확인 합 니 다.
네 번 째 방법
앞의 세 가지 방안 은 모두 오래된 프로젝트 를 말 하 는데 이미 대량의 그림 이 도입 되 어 방법 이 없다.그러나 그림 자원 이 많 지 않 거나 새로운 프로젝트 가 있다 면 이 럴 때 포장 설정 을 바 꿀 필요 가 없습니다.우 리 는 처음부터 이 문 제 를 피 할 수 있다.html 의 img 태그 에 대해 서 는 import 방식 으로 그림 을 먼저 도입 한 다음 data 에 넣 고 src 에 연결 할 수 있 습 니 다.

import logo from "../assets/logo.png";
data() {
 return {
 logo，
 };
},

<img :src="logo" width="78" height="78" alt="logo">

css 의 경 로 는@을 통 해 도입 할 수 있 습 니 다(@은 src 디 렉 터 리 와 같 습 니 다).예 를 들 어:

background: url("@/assets/logo.png") no-repeat;

또한,asstes 디 렉 터 리 에 직접 넣 지 않 아 도 이 문 제 를 피 할 수 있 습 니 다.
총결산
vue css 가 asstes 에 있 는 그림 을 도입 하여 표시 할 수 없 는 네 가지 해결 방법 에 관 한 글 을 소개 합 니 다.더 많은 vue css 가 asstes 그림 을 도입 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 를 많이 응원 해 주세요!