Vue 3 + Vite 개발 서버의 동적 라우팅으로 인해 페이지를 다시 로드할 때 404 오류가 발생함

Question

내 프로젝트에서는 Vue 3.2.36 + Vite 2.9.9 + VueRouter 4.1.3

을 사용합니다. npm run dev를 사용하여 개발 서버를 실행합니다.

내 경로 정의:

으아악

router.push({name: 'userDetails', params: {login: 'john.smith'}}) 以编程方式导航时，userDetails를 사용하면 페이지/구성 요소가 올바르게 표시됩니다.

하지만 브라우저가 다시 로드되면 개발 서버가 404를 반환하고 NotFound 구성 요소가 표시되지 않습니다.

크롬:

FF:

작업 예시: 여기

문제를 Vite로 격리했습니다. Vue CLI를 사용하면 모든 것이 잘 작동합니다.

내 vite.config.js:

으아악

내 것을 확인함index.html:

vue-router 历史模式文档，并在警告部分中指出，如果未找到路由，路由器应默认为 index.htmlvue-router

기록 모드 문서를 확인하고 경고 섹션에 경로를 찾을 수 없으면 라우터가 🎜로 기본 설정되어야 하며 Vue CLI를 사용하지만 Vite를 사용하지 않고 이 작업을 수행한다고 명시되어 있습니다. 🎜

Answer 1

내 웹 애플리케이션이 Azure DevOps에 있지만 Linux에 있습니다. Linux 웹 애플리케이션의 경우 시작 시 웹 애플리케이션 명령을 실행하려면 다음 명령을 추가해야 합니다. 이것은 나에게 효과적입니다.

으아악

이 문서에서 자세한 내용을 확인할 수 있습니다. Azure webapp linux의 React 앱

Answer 2

예, Vite의 버그를 인식하고 있습니다.
해결책은 여기에 설명된 대로 Vite에서 플러그인

을 사용하는 것입니다.

나에게 이것은 절대 안 되는 일이다. Vue CLI로 전환하겠습니다.
나는 이런 작은 괴물을 상대하고 싶지 않습니다.
나는 몇 년 후에 다시 Vite를 방문할 것이다.