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

首先在前端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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值