vue+webpack 패키징 경로에 어떤 문제가 있나요?

이번에는 vue+webpack 패키징 경로의 문제점과 Shanxi i'an의 vue+webpack 패키징 경로에 대한 주의사항이 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다. 봐.

최근에 작은 vue 프로젝트를 작성했는데 웹 프로젝트로만 공개하고 싶지 않아서 리소스 프로젝트의 public 폴더에 넣으려고 했는데 사소한 문제가 있어서 요약하겠습니다. 여기 있어요.

리소스 경로는 다음과 같습니다.

공용 디렉터리에 구성된 액세스 경로는 "/"입니다. 이 경우 액세스 경로는 "도메인 이름/vue-demo"가 됩니다. 프로그램에 액세스할 때 오류가 보고되지 않았지만 페이지가 비어 있었습니다. 이전에는 이런 방식으로 출시된 프로젝트들은 문제가 없었는데 이번에는 어떻게 된 걸까요?

주의 깊게 조사한 결과 vue-router가 원인이라는 것을 알았습니다. 프로젝트의 필요로 인해 스크롤 동작 이 사용됩니다. 스크롤 동작은 기록 모드를 켜야 합니다. vue-router 공식 문서에는 다음과 같은 문장이 있습니다.

기록을 사용할 때 모드에서는 URL이 일반 URL과 같습니다. 예를 들어 http://yoursite.com/user/id도 보기 좋습니다.

단, 이 모드를 잘 플레이하려면 배경 구성 지원도 필요합니다. 우리 애플리케이션은 단일 페이지 클라이언트 애플리케이션이기 때문에 배경이 올바르게 구성되지 않은 경우 사용자가 브라우저에서 http://oursite.com/user/id에 직접 액세스하면 404가 반환되어 보기에 좋지 않습니다. .

따라서 모든 상황을 포괄하는 후보 리소스를 서버 측에 추가해야 합니다. URL이 어떤 정적 리소스와도 일치하지 않으면 앱이 의존하는 페이지인 동일한 index.html 페이지를 반환해야 합니다. .

vue-router가 모니터링하는 경로는 여전히 "/" 및 "/comComponent"이며 자연 경로가 일치하지 않습니다.

따라서 경로를 수정하고 각 경로에 프로젝트 이름, 즉 "/vue-demo"를 추가해야 합니다. 동시에 리소스 파일이 올바르게 로드되도록 하려면 패키징 중 publicPath도 필요합니다. "/vue-demo"를 추가합니다.

완료! !

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

추천 도서:

vue 패키징 후 글꼴 및 이미지 리소스 오류 처리 방법

webpack 글꼴 아이콘이 표시되지 않는 문제 해결 방법

위 내용은 vue+webpack 패키징 경로에 어떤 문제가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!