tomcat部署vue项目，一刷新就报404错误解决

Posted 2022-02-02 mp-ui

首先在前端vue项目中，src/router/index.js中将模式改成history

const router = new VueRouter(
  mode: 'history',
  base: process.env.BASE_URL,
  routes
)

如果项目打包好之后是直接放在tomcat，那么需要在打包好的项目根路径下面创建WEB-INF文件夹，并在文件夹里面新建一个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>

如果是直接放在springboot项目的recources/static上面，则需要加一个配置类

/**
 * 404错误页面重定向
 * @author Prince
 */
@Configuration
public class ErrorConfiguration implements ErrorPageRegistrar 

    @Override
    public void registerErrorPages(ErrorPageRegistry registry) 
        ErrorPage[] errorPages = new ErrorPage[1];
        errorPages[0] = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
        registry.addErrorPages(errorPages);
    

如果是用其他方式部署的可以看一下官方的文档：https://router.vuejs.org/zh/guide/essentials/history-mode.html