Vue static 정적 자원 경로 와 style 문제

긴 말 안 할 게 요.그냥 코드 보 세 요~

 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 //             
 assetsSubDirectory: 'static',
 //     cdn  
 assetsPublicPath: '/',

인용 할 때 직접 이전 단계 로 돌아 가 찾 지 않 아 도 됩 니 다.출력 을 컴 파일 한 static 의 자원 은 html 와 같은 디 렉 터 리 에 있 기 때 문 입 니 다.

단일 vue 파일 에 있 는 style 을 사용 하지 않 으 면 삭제 하 는 것 이 좋 습 니 다.그렇지 않 으 면 html 페이지 에 빈 style 이 자동 으로 생 성 됩 니 다.
추가 지식:웹 팩+vuecli 패키지 생 성 자원 상대 참조 경로 와 배경 그림 의 정확 한 참조
자원 상대 참조 경로
문제 설명
일반적인 상황 에서 웹 팩+vuecli 를 통 해 기본적으로 포 장 된 css,js 등 자원 은 경로 가 절대적 입 니 다.

그러나 폴 더 가 있 는 항목 에 배치 되면 이러한 절대 경로 에 문제 가 생 길 수 있 습 니 다.설정 한 static 폴 더 를 루트 경로 로 생각 하기 때문에 이 문 제 를 해결 하려 면 상대 경 로 를 참조 해 야 합 니 다.
해결 방법
webpack.prod.conf.js 열기
output 찾기:publicPath:'./'를 추가 하면 됩 니 다.그림 과 같 습 니 다.

그러면 이렇게 되면 자원 의 인용 경로 가 정확 합 니 다.
물론 config 폴 더 의 index.js 에서 assets PublicPath:'./'를 수정 하면 자원 의 상대 적 인 인용 에 도달 할 수 있 습 니 다.
배경 그림 참조 문제
위 에서 자원 경로 의 인용 문 제 를 해 결 했 지만 자원 안의 배경 그림 은 index.html 에서 자원 을 불 러 오 는 것 처럼./static/js/app.js 인용 을 통 해 정상적으로 불 러 올 수 있 습 니 다.그림 자원 은 css 를 통 해 불 러 옵 니 다.예 를 들 어 background:url(".././assets/images/logo-index.png")no-repeat;상대 적 으로 포장 되 어 url(static/img/logo-index.2f00bf2.png)no-repeat 가 되 었 기 때문에 css 참조 그림 의 정상 적 인 경 로 를 유지 해 야 합 니 다.즉,:
url(../../static/img/logo-index.2f00bf2.png) no-repeat
그림 과 같이 build 폴 더 의 utils.js 코드 를 수정 해 야 합 니 다.

그림 과 같은 코드 를 추가 하면 글꼴 이 든 그림 의 인용 문제 든 해결 할 수 있 습 니 다.
위 에서 말씀 드 린 Vue static 정적 자원 경로 와 style 문 제 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.