최근에 vue+webpack을 통한 패키징 경로에 문제가 있음을 발견했습니다.

이제 vue+webpack 패키징 경로 문제를 해결하기 위한 기사를 공유하겠습니다. 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

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

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

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

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

모드에서는 URL이 http://yoursite.com/user/id와 같은 일반 URL과 유사하며 보기에도 좋습니다!

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

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

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

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

완료! !

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

관련 기사:

JavaScript를 통해 WeChat 무작위 전환 코드를 구현하는 방법(상세 튜토리얼)

ES6를 사용하여 WeakMap을 통해 메모리 누수 문제 해결(상세 튜토리얼)

vue+element- 사용 ui+ 이러한 Ajax 기술은 양식의 예를 구현할 수 있습니다

위 내용은 최근에 vue+webpack을 통한 패키징 경로에 문제가 있음을 발견했습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!