Vue 프로젝트를 서버에 배포할 때 문제를 해결하는 방법

이 글은 주로 Vue 프로젝트를 서버에 배포하는 문제에 대한 해결책을 소개합니다. 편집자는 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴볼까요

많은 친구들이 Vue-cli가 설치한 스캐폴딩을 사용하여 개발을 하면 개발 환경에서는 프로젝트가 정상적으로 실행될 수 있지만 프로덕션 환경에 들어가서 컴파일하고 패키징한 뒤, 서버에 넣으면 프로젝트가 정상적이지 않으며 빈 페이지나 라우팅 점프 404와 같은 문제가 나타납니다. 이러한 문제가 발생하더라도 당황하지 마십시오. 올바른 구성과 백엔드의 간단한 협력으로 문제를 해결할 수 있습니다.

패키징 방법

Vue-Cli 기반으로 npm run build를 통해 패키징 작업을 수행합니다.

배포 방법

1. Vue-Cli 기반으로 패키징된 리소스는 대개 dist 디렉터리에 static을 가지고 있습니다. 디렉토리와 index.html 파일, 이 두 파일을 서버에 직접 던질 수 있습니다

2. 그러나 때로는 dist 파일을 서버에 직접 던질 수도 있습니다

문제

1. 포장 서버, 리소스 참조 경로에 문제가 있습니다

2. 서버에 패키징한 후 공백 페이지 문제가 발생합니다

3. 서버에 패키징한 후 가져온 CSS의 유형을 가로채서 " text/plain"

4. 서버에 패키징한 후 Route Refresh 404 문제가 발생합니다

다음 저자는 Vue 프로젝트를 일반 배포로 컴파일하고 패키징한 경험을 바탕으로 이러한 문제를 해결하는 방법을 알려줄 것입니다. 서버의.

1. 프런트엔드 구성:

①, 라우터 구성 - 경로 시작 지정(개발 모드에서 Vue 프로젝트는 nodeJs를 사용하여 webpack으로 생성된 로컬 서버의 루트 디렉터리에 배치되지만 실제 환경에서는 서버, 프로젝트는 절대로 루트 디렉터리에 위치하지 않으므로 라우터의 베이스를 지정해야 합니다

router

프로젝트 배포의 서버 폴더 경로를 백엔드와 미리 협의

②, 구성을 컴파일하고 패키징합니다

Config 입력 -- > index.js

build

3, 패키징을 위해 npm run build를 사용하면 지금까지 프런트엔드에서 할 수 있는 구성이 완료되었습니다

두 번째, 백엔드 구성:

라우팅 점프는 주로 404로 나타납니다. 그 이유는 백엔드가 이 가상 프런트엔드 경로에 대해 어떤 처리도 수행하지 않기 때문입니다. 서버가 지정된 경로에서 리소스를 찾을 수 없을 때 발생할 수 있습니다. 404만 클라이언트에 반환합니다.

솔루션(Apache): URL 재작성---Vue 프로젝트가 있는 서버 폴더의 경로를 재작성합니다. 예:

leibo.group/pcMall/.... leibo.group/pcMall/로 재작성합니다. index .html

.hatccess

특정 Apache에서는 허용 재정의, URL 재작성이 가능하며 백엔드를 몇 분 안에 해결할 수 있습니다

다른 유형의 서버인 경우

https://router.vuejs.org를 참조하세요. /zh-cn/essentials/history-mode.html

요약: 단일 페이지 배포 서버에서는 실제로 프런트 엔드 라우팅을 사용하여 사용자 인터페이스 콘텐츠의 변경 사항을 제어하는 ​​사고 방식의 변화에 ​​가깝습니다. 작성자가 프로젝트 배포 서버에서 수행한 작업 중 일부 경험, 설명이 부적절한 부분이 있으면 지적해 주세요!

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

vue에서 axios 보조 캡슐화를 구현하는 방법

WeChat 애플릿에서 오디오 구성 요소를 사용하는 방법

비디오 구성 요소를 사용하여 WeChat 애플릿에서 비디오를 재생하는 방법

WeChat 애플릿에서 다운로드 진행률 표시줄을 구현하는 방법

JavaScript에서 휴대폰 번호 확인 도구인 PhoneUtils를 사용하는 방법

위 내용은 Vue 프로젝트를 서버에 배포할 때 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!