Vue 프로젝트가 webpack으로 패키징되고 배포될 때 Tomcat에서 보고된 404 오류를 처리하는 방법

이번에는 Vue 프로젝트 웹팩을 패키징하고 배포할 때 Tomcat 새로 고침 404 오류 문제를 해결하는 방법을 보여 드리겠습니다. Vue 프로젝트 웹팩을 패키징하고 배포할 때 주의할 사항은 무엇입니까? 실제 사례를 살펴보겠습니다.

문제 발생webpack을 사용하여 vue를 패키징한 후 패키지된 파일을 Tomcat에 게시합니다. 액세스에 성공했지만 새로 고침 후 페이지에서 404 오류를 보고합니다.

인터넷에서 검색한 결과 HTML5 History 모드로 인해 문제가 발생한 것으로 나타났습니다. Vue에서 제공한 공식 설명은

https://

router.vuejs.org/zh-를 참조하세요. cn/essentials/history -mode.html그런데 읽은 후 문제가 다시 발생했습니다. 공식 솔루션에서는 tomcat에서 해결 방법을 언급하지 않았습니다.

솔루션공식 솔루션 원칙에 따라

모든 상황을 처리하려면 서버에 후보 리소스를 추가해야 합니다. URL이 어떤

정적

리소스와도 일치하지 않으면 동일한 리소스가 반환되어야 합니다. index.html 페이지에서 이 페이지는 앱이 의존하는 페이지입니다. Tomcat 서버에서 이 작업을 수행할 수 있습니다. 패키지된 프로젝트의 루트 디렉터리에 새로운 WEB-INF 폴더를 생성하고, WEB-INF에 web.xml을 작성합니다.

web.xml에 쓰기:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
           http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1" metadata-complete="true">
  <display-name>Router for Tomcat</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

404가 발생하면 index.html 페이지로 돌아가는 것이 목적입니다.

마지막으로 경로를 구성하고, 모든 것을 포괄하는 경로 상황을 구성한 다음 404 페이지를 제공해야 합니다.

const router = new VueRouter({
 mode: 'history',
 routes: [
  { 
    path: '*', 
    component: (resolve) => require(['./views/error404.vue'], resolve) 
  }
 ]
})

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

추천 자료:

php

php를 사용하여 사용자 정의 길이의 임의 문자열을 생성하는 단계에 대한 자세한 설명은 임의의 숫자, 문자 또는 숫자와 문자가 혼합된 문자열을 생성합니다

위 내용은 Vue 프로젝트가 webpack으로 패키징되고 배포될 때 Tomcat에서 보고된 404 오류를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!