Vue-router 학습 노트 - 만나는 구덩이 (一)history 모드 리셋/설정 플러그인 404/cannot find (webpack 설정)

앞부분의 루트는 두 가지가 있는데 하나는hash모드이고 하나는history모드이다.
이 두 가지 모드의 URL 경로는 모두 진실하게 존재할 필요가 없고, 단지 앞부분을 표시하기 위해 점프하기만 하면 된다.hash 모드의 URL 경로는 # 를 가지고 있어서 불편하고 SEO를 하기 어려워 보이지만 브라우저가 서버에 요청할 때 # 뒤에 있는 값을 자동으로 무시하기 때문에 브라우저에서 새로 고치는 것은 정상적입니다.History 모드의 URL 경로는 우리가 평소에 보듯이 진짜처럼 보이기 때문에 브라우저가 서버에 요청(즉 리셋)을 할 때 서버에 이 경로 자원이 전혀 없다는 것을 발견하여 404로 되돌아옵니다.
웹 페이지 설정 항목에 devServer를 추가해야 합니다

// history url ， ， 404， 
historyApiFallback: {
	index: '/index.html' // output publicPath (HTMLplugin html index.html)
},

루트 설정children에서도 404의 상황이 발생합니다. 왜냐하면history 모드로 설정한 후 원래의 정적 자원을 얻지 못했기 때문입니다.

//  hash 
<script type="text/javascript" src="bundle.feed9913.js">script>body>

직접적으로 도입된 것으로 볼 수 있다bundle.js. 그러므로children이 있으면 전체 주소는 http://localhost:8080/chidren/bundle.js가 되지만 사실 우리가 도입해야 할 것은 http://localhost:8080/bundle.js이기 때문에 bundle.js에 하나 / 를 추가하는 것이 루트에서 도입하는 것을 대표한다.
웹 팩 설정 항목에 추가해야 합니다

output: {
	//  ， 
	publicPath: '/'
},

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Vue-Router 업그레이드 로 인 한 Uncaught(in promise)문제 해결

방법 2:Router 원형 체인 에 있 는 push,replace 방법 을 다시 쓰 면 매번 호출 방법 에 catch 를 추가 하지 않 아 도 됩 니 다.이 방법 은 vue-router 의 중의 한 사내 가 해결 한...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Vue-router 학습 노트 - 만나는 구덩이 (一)history 모드 리셋/설정 플러그인 404/cannot find (webpack 설정)

좋은 웹페이지 즐겨찾기