vue 정적 리소스 패키징 문제

이번에는 vuestatic리소스 패키징의 문제점을 알려드리겠습니다. vue 정적 리소스 패키징의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

①. vue-cli의 기본 구성은 특정 경로에 패키지되어 있습니다. 정적 리소스 경로 오류는 문제입니다.

②.css 파일은 상대 경로.

1. 문제

vue-cli 스캐폴딩이 기본 패키징 구성 파일을 생성했습니다. 패키징 후 프로젝트를 특정 경로에 배포합니다. 예:

//ip:port/public/springActivity/

여기에서 액세스하세요. time:

http://ip:port/public/springActivity/index.html

index.html은 정상적으로 접속이 가능하지만 참조된 js, css 및 기타 파일 서버 응답이 모두 404이므로 가져온 리소스 경로를 확인하세요.

http://ip:port/static/css/app.cea07642cd24c0d7a5c4b9b7afc7ff64.css
http://ip:port/static/js/app.815851e87b083afb82bf.js

2를 보시면 됩니다. 문제는 리소스 패키징 경로가 잘못되어 패키지된 리소스가 절대 루트 디렉터리 경로를 사용하기 때문에 프로젝트를 특정 디렉터리에 배포할 때 도입된 리소스 경로를 올바르게 구문 분석할 수 없다는 것입니다.

3. 패키징 시 정적 리소스를 처리하기 위해

상대 경로를 사용해야 하는 문제를 해결하려면 빌드(config/index.js, 빌드 개체)에서 리소스 릴리스 경로 구성을 변경하세요.

Change 자산PublicPath: '/ '에서 AssetPublicPath: './',

다시 패키징하여 리소스를 특정 경로에 배포한 후 액세스:

이때 index.html은 정상적으로 액세스 가능하며, js, css 리소스도 정상적으로 액세스 가능하며, 그런데 CSS에 소개된 자산 디렉토리 대용량 이미지 리소스(서버 404)에서 오류가 발생했습니다.

4. 재분석

가져온 이미지 리소스 경로를 다음과 같이 확인하세요.

http://ip:port/public/springActivity /static/css/static/img/question_bg.61a2825.png

실제 프로젝트의 리소스 경로는 다음과 같습니다.

index.html
static/
 |--js/
  |--*.js
 |--css/
  |--*.css
 |--img/
  |--*.png

분명히 이미지 가져오기 경로가 잘못되었습니다. 이미지 가져오기 경로를 분석한 결과 해당 경로에 "/static/css"라는 두 개의 추가 디렉터리가 있는 것으로 나타났습니다. css 디렉터리의 CSS 파일이 이미지 경로를 "/static/img/question_bg.61a2825.png"로 가져오는 것으로 추측됩니다. .css 파일을 확인하세요. css 에 소개된 이미지 경로는

Background

:url(static/img/question_bg.61a2825.png)5.

css에서 경로 문제를 해결하면 됩니다. 파일의 경우 패키징 링크의 리소스 경로가 제대로 구성되지 않았어야 합니다. 패키징 프로세스를 분석하면 CSS가 js에 도입되거나 vue 파일에 작성됩니다. 처리 후 CSS 파일이 먼저 처리됩니다. ,

Extract

TextPlugin에 의해 처리됩니다. ExtractTextPlugin은 js의 모든 CSS를 app.css 파일로 추출합니다. 먼저 options.extract를 false로 설정하고 CSS 추출 기능을 끄고 다시 패키지한 후 특정 디렉터리에 배포하고 다음 페이지를 방문하세요. http://ip:port/public/springActivity/index.html, bang, the page 정상적으로 표시됩니다. 공개가 거의 완료되었습니다.

패키지 파일을 분석한 결과 CSS 파일이 없는 것을 발견했습니다. CSS 파일은 모두 app.js 파일에 있는 것으로 나타났습니다. CSS는 js를 통해 index.html 파일에 삽입되므로 이미지 리소스 경로가 도입됩니다. CSS 파일의 경로는 인덱스 .html 파일 경로에 상대적이어야 합니다. 즉, "static/img/question_bg.61a2825.png"입니다. 이는 아래 CSS 파일의 이미지 리소스 경로와 일치하므로 이미지에 액세스할 수 있습니다. 보통.

배경:url(static/img/question_bg.61a2825.png)

이제 문제가 어디에 있는지 알 수 있습니다. 즉, ExtractTextPlugin이 CSS 파일을 추출할 때 리소스 소개 경로를 변환하지 않아 app.css가 리소스 소개 경로를 소개하게 되었습니다. 상대 앱. CSS 디렉토리는 "static/img/.png"의 정적 리소스입니다. index.html에 대한 상대 경로는 static/css/static/img/.png입니다.

따라서 ExtractTextPlugin 플러그인을 사용할 때 정적 리소스 경로 매개변수도 구성해야 합니다. 데이터를 쿼리하여 publicPath: "../../":

를 추가하면 문제를 해결할 수 있다는 것을 알게 되었습니다.

if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader',
 publicPath:"../../"     //添加
 })
}

특정 디렉터리에 패키징하여 배포한 후 index.html 파일에 접근하면 페이지의 모든 내용이 정상이고, app.css 파일도 정상적으로 가져오고, 이미지 리소스도 정상적으로 가져오는지 확인하여 가져오세요. 이미지 리소스는 다음과 같습니다:

background:url(../../static/img/question_bg.61a2825.png

publicPath가 구성되면 CSS 파일에 도입된 이미지 파일 경로 앞에 경로 구성이 추가됩니다.

publicPath 속성 값은 패키지된 app.css 파일에서 index.html 파일까지의 상대 경로입니다.

이미지 리소스는 또한 vue-cli에 의해 생성된 정적 디렉토리는 위의 문제를 방지하지만, 이런 방식으로 이미지 이름에 md5string을 추가할 수 없어 버전 관리에 도움이 되지 않습니다

위는 전체 내용입니다 이 기사가 모든 사람의 학습에 도움이 되기를 바랍니다. 또한 모든 사람이 Script House를 지원하기를 바랍니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

datepicker 사용 방법

mixin

D3.js의 고급 구성 요소를 사용하여 물류 지도

를 만드는 방법에 대한 자세한 설명

위 내용은 vue 정적 리소스 패키징 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!