vue-cli 비계 도입 그림 의 몇 가지 방법 요약

저 는 개인 적 으로 자주 사용 하 는 방법 으로 더 좋 은 방법 을 계속 모색 하고 있 습 니 다.만약 에 여러분 이 어떤 건의 가 있 으 면 댓 글 을 남 겨 주세요.
1.import 방법
첫 번 째 단계:.vue 파일 에서 import edit from'path'(path 는 그림 과.vue 의 상대 경로)
두 번 째 단계:data 대상 에서 속성 edits 를 정의 합 니 다.값 은 edit 에 대응 합 니 다.

세 번 째 단계:template 에서 태그 바 인 딩 속성

마지막 으로 화면 을 새로 고침 해서 효 과 를 보시 면 됩 니 다!
2.static 방법
첫 번 째 단계:그림 은 static 폴 더 에 놓 고 data 대상 의 하나 에 속성 pro 를 정의 합 니 다.img,속성 값 은 그림 과 vue 의 상대 경로 입 니 다.

두 번 째 단계:template 에서 태그 바 인 딩 속성

새로 고침 효과 보기
vue 구성 요소 css 의 배경 그림 경로 오류 해결
전 제 는 vue-cil 을 사용 했다 는 것 입 니 다.build 디 렉 터 리 에서 utils.js 의 ExtractTextPlugin.extract({})를 찾 으 면 다음 속성 을 추가 하면 PublicPath:'../../'를 완벽 하 게 해결 할 수 있 습 니 다.

해명 하 다.
파일 은 결국 js 로 압축 됩 니 다.실행 할 때 css 의 상대 경 로 는 루트 디 렉 터 리 에 변화 가 생 겨 서 로드 오류 가 발생 했 습 니 다.
다음은 이 플러그 인의 설명 입 니 다.
extract-text-webpack-plugin
역할:이 플러그 인 은 주로 css 스타일 을 추출 하여 js 에 스타일 을 포장 하여 페이지 스타일 로 딩 오류 가 발생 하 는 것 을 방지 하기 위해 서 입 니 다.
플러그 인 매개 변수:이 플러그 인 은 세 개의 매개 변수 의미 가 있 습 니 다.각각 다음 과 같 습 니 다.
use:어떤 loader 가 파일 을 컴 파일 해 야 하 는 지 말 합 니 다.원본 파일 이.css 이기 때문에 css-loader 를 선택 하 십시오.
fallback:컴 파일 후 어떤 loader 로 css 파일 을 추출 합 니까?
publicfile:프로젝트 경 로 를 덮어 쓰 고 css 파일 을 만 드 는 파일 경로
이상 의 vue-cli 비계 가 그림 을 도입 하 는 몇 가지 방법 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.