欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

程序员文章站 2022-07-04 18:05:36
遇到的问题 使用webpack打包vue后,将打包好的文件,发布到tomcat上,访问成功,但是刷新后页面报404错。 在网上查找了一下,原来是html5 histor...

遇到的问题

使用webpack打包vue后,将打包好的文件,发布到tomcat上,访问成功,但是刷新后页面报404错。

在网上查找了一下,原来是html5 history 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看

但是看完问题又来了,官方给出的解决方案中没有说tomcat下,怎么决解。

解决方案

根据官方给出的解决方案原理

你要在服务端增加一个覆盖所有情况的候选资源:如果 url 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

所以在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 页面。

最后还需要配置一下你的route,配置一个覆盖所有的路由情况,然后在给出一个 404 页面。

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

总结

以上所述是小编给大家介绍的vue项目webpack打包部署到tomcat刷新报404错误问题的解决方案,希望对大家有所帮助