vue에서 정적 리소스를 패키징하는 방법

이 글은 주로 Vue 정적 리소스 패키징의 함정과 솔루션을 소개합니다. 이제 이 글은 주로 경로 문제를 해결하고 참고할 것입니다.

이 문서는 주로

①.vue-cli 기본 구성이 패키지되어 특정 경로에 배포될 때 발생하는 정적 리소스 경로 오류 문제를 해결합니다.

②. 정적 리소스 패키징이 상대 경로를 사용한 후 CSS 파일에 큰 이미지가 표시됩니다. 경로 오류.

1. 문제

vue-cli 스캐폴딩은 npm run build를 실행하여 기본 패키징 구성 파일을 생성합니다. 패키징 후 프로젝트를 특정 경로(예:

//ip:port/public/springActivity/

)에 배포합니다.

접속시 :

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: '/ ' to 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 파일에 작성되면 먼저 less, postcss 등으로 처리됩니다. ExtractTextPlugin.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 파일의 이미지 리소스 경로와 일치하므로 이미지에 액세스할 수 있습니다. 보통.

Background: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에서 생성된 정적 디렉터리에 직접 배치할 수 있지만, 이런 식으로 이미지 이름에 md5 문자열을 추가할 수 없으므로 버전 관리에 도움이 되지 않습니다. 위의 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다. :

jQuery에서 가장자리 바운스 애니메이션 효과를 얻는 방법은 무엇입니까?

vue cli webpack에서 sass를 사용하는 방법(자세한 튜토리얼)

jQuery P 레이블 텍스트 값을 변경하는 방법

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