웹 프론트엔드 JS 튜토리얼 vue 정적 리소스 패키징 문제

vue 정적 리소스 패키징 문제

Mar 23, 2018 pm 03:19 PM
질문

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PyCharm 프로젝트를 패키징하는 쉬운 방법 공유 PyCharm 프로젝트를 패키징하는 쉬운 방법 공유 Dec 30, 2023 am 09:34 AM

간단하고 이해하기 쉬운 PyCharm 프로젝트 패키징 방법을 공유하세요. Python의 인기로 인해 점점 더 많은 개발자가 PyCharm을 Python 개발의 주요 도구로 사용하고 있습니다. PyCharm은 개발 효율성을 향상시키는 데 도움이 되는 다양한 편리한 기능을 제공하는 강력한 통합 개발 환경입니다. 중요한 기능 중 하나는 프로젝트 패키징입니다. 이 글에서는 간단하고 이해하기 쉬운 방식으로 PyCharm에서 프로젝트를 패키징하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 왜 패키지 프로젝트인가? Python으로 개발됨

VSCode 기능에 대한 자세한 설명: 작업 효율성을 높이는 데 어떻게 도움이 되나요? VSCode 기능에 대한 자세한 설명: 작업 효율성을 높이는 데 어떻게 도움이 되나요? Mar 25, 2024 pm 05:27 PM

VSCode 기능에 대한 자세한 설명: 작업 효율성을 높이는 데 어떻게 도움이 되나요? 소프트웨어 개발 산업이 지속적으로 발전함에 따라 개발자의 작업 효율성과 코드 품질 추구는 작업에서 중요한 목표가 되었습니다. 이 과정에서 코드 편집기의 선택은 중요한 결정이 됩니다. 많은 편집기 중에서 Visual Studio Code(줄여서 VSCode)는 강력한 기능과 유연한 확장성으로 대다수 개발자에게 사랑을 받고 있습니다. 이 기사에서는 VSCode의 일부 기능을 자세히 소개하고 논의합니다.

jQuery가 양식 요소 값을 얻을 수 없는 문제를 해결하는 방법 jQuery가 양식 요소 값을 얻을 수 없는 문제를 해결하는 방법 Feb 19, 2024 pm 02:01 PM

jQuery.val()을 사용할 수 없는 문제를 해결하려면 구체적인 코드 예제가 필요합니다. 프론트 엔드 개발자에게는 jQuery를 사용하는 것이 일반적인 작업 중 하나입니다. 그중에서도 .val() 메서드를 사용하여 양식 요소의 값을 가져오거나 설정하는 것은 매우 일반적인 작업입니다. 그러나 특정한 경우에는 .val() 메서드를 사용하지 못하는 문제가 발생할 수 있습니다. 이 문서에서는 몇 가지 일반적인 상황과 해결 방법을 소개하고 구체적인 코드 예제를 제공합니다. 문제 설명 jQuery를 사용하여 프런트 엔드 페이지를 개발할 때 때때로 다음과 같은 문제가 발생할 수 있습니다.

일반적인 iPhone 문제를 진단하는 방법을 가르쳐주세요. 일반적인 iPhone 문제를 진단하는 방법을 가르쳐주세요. Dec 03, 2023 am 08:15 AM

강력한 성능과 다재다능한 기능으로 잘 알려진 iPhone은 복잡한 전자 장치에서 흔히 발생하는 문제인 가끔씩 발생하는 문제나 기술적인 어려움으로부터 자유롭지 않습니다. iPhone 문제를 경험하면 실망스러울 수 있지만 일반적으로 알람은 필요하지 않습니다. 이 종합 가이드에서는 iPhone 사용과 관련하여 가장 일반적으로 직면하는 문제 중 일부를 쉽게 설명하는 것을 목표로 합니다. 당사의 단계별 접근 방식은 이러한 일반적인 문제를 해결하는 데 도움을 주고 장비를 최상의 작동 순서로 되돌릴 수 있는 실용적인 솔루션과 문제 해결 팁을 제공하도록 설계되었습니다. 결함이 있거나 더 복잡한 문제에 직면하더라도 이 문서는 문제를 효과적으로 해결하는 데 도움이 될 수 있습니다. 일반적인 문제 해결 팁 특정 문제 해결 단계를 진행하기 전에 다음은 몇 가지 유용한 정보입니다.

클러스터링 알고리즘의 클러스터링 효과 평가 문제 클러스터링 알고리즘의 클러스터링 효과 평가 문제 Oct 10, 2023 pm 01:12 PM

클러스터링 알고리즘에서 클러스터링 효과 평가 문제에는 특정 코드 예제가 필요합니다. 클러스터링은 데이터를 클러스터링하여 유사한 샘플을 하나의 범주로 그룹화하는 비지도 학습 방법입니다. 클러스터링 알고리즘에서는 클러스터링의 효과를 어떻게 평가하는가가 중요한 문제입니다. 이 기사에서는 일반적으로 사용되는 몇 가지 클러스터링 효과 평가 지표를 소개하고 해당 코드 예제를 제공합니다. 1. 클러스터링 효과 평가 지수 실루엣 계수 실루엣 계수는 표본의 근접성 및 다른 클러스터와의 분리 정도를 계산하여 클러스터링 효과를 평가합니다.

Python 애플리케이션의 궁극적인 진화: PyInstaller는 고치에서 나와 나비가 됩니다. Python 애플리케이션의 궁극적인 진화: PyInstaller는 고치에서 나와 나비가 됩니다. Feb 19, 2024 pm 03:27 PM

PyInstaller는 원래 스크립팅 형식을 뛰어넘어 Python 애플리케이션을 강화하는 혁신적인 도구입니다. Python 코드를 독립형 실행 파일로 컴파일함으로써 PyInstaller는 코드 배포, 배포 및 유지 관리의 새로운 영역을 열어줍니다. 단일 스크립트에서 강력한 애플리케이션까지 과거에는 Python 스크립트가 특정 Python 환경에만 존재했습니다. 이러한 스크립트를 배포하려면 사용자가 Python과 필요한 라이브러리를 설치해야 하는데, 이는 시간이 많이 걸리고 번거로운 프로세스입니다. PyInstaller는 Python 코드와 모든 필수 종속성을 단일 실행 파일로 결합하는 패키징 개념을 도입합니다. 코드 패키징 기술 PyInstaller의 작업

Python 응용 프로그램의 독립 선언: PyInstaller의 자유를 향한 길 Python 응용 프로그램의 독립 선언: PyInstaller의 자유를 향한 길 Feb 20, 2024 am 09:27 AM

PyInstaller: Python 애플리케이션의 독립성 PyInstaller는 Python 애플리케이션과 해당 종속성을 독립적인 실행 파일로 패키징하는 오픈 소스 Python 패키징 도구입니다. 이 프로세스는 Python 인터프리터에 대한 의존성을 제거하는 동시에 애플리케이션이 Windows, MacOS 및 Linux를 포함한 다양한 플랫폼에서 실행될 수 있도록 합니다. 패키징 프로세스 PyInstaller의 패키징 프로세스는 비교적 간단하며 다음 단계로 구성됩니다. pipinstallpyinstallerpyinstaller--onefile--windowedmain.py--onefile 옵션은 단일 파일을 생성합니다.

PyCharm 튜토리얼: Python 코드를 EXE 파일로 패키징하는 방법 PyCharm 튜토리얼: Python 코드를 EXE 파일로 패키징하는 방법 Feb 21, 2024 pm 12:12 PM

이 기사에서는 PyInstaller를 사용하여 Python 코드를 실행 가능한 EXE 파일로 패키징하는 PyCharm의 일반적인 방법을 소개합니다. PyInstaller는 Python 애플리케이션을 독립적인 실행 파일로 변환하는 도구입니다. Python 코드를 EXE, APP, Linux 및 기타 형식으로 패키징할 수 있어 사용자가 Python 인터프리터가 설치되지 않은 환경에서 Python 프로그램을 편리하게 실행할 수 있습니다. 1단계: PyIn 설치

See all articles