解决Vue项目history模式下打包部署到云服务器，访问路径，重复点击路由，刷新报404异常的问题！！！

history模式下打包部署的访问路径

以下步骤皆以Tomcat为例
部署位置是Tomcat的webapps包下（可以自己配存放位置，这里不是重点）

打包路径问题一，保证Vue的路由路径与我们部署在webapps包下的路径一致

问题二，在项目目录下新建vue.config.js文件，增加配置：

module.exports = {
     
  publicPath: './',
  assetsDir:'static',
  lintOnSave: true,
  productionSourceMap: false,
  devServer: {
     
    open: true,
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null,
  }
}
//项目发布时的配置

这个配置有什么用呢，如果没有这个配置，你打包的dist文件夹下的index.html的引入文件的路径是错误的，端口是可以在服务器上配置的，这里没必要改

上面的是解决了打包访问路径的问题

解决history模式下重复点击路由报错问题

直接上代码：（在router的index.js中增加以下配置）

//下面代码解决了重复点击报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
     
  return originalPush.call(this, location).catch(err => err)
}

解决history模式下页面刷新报404的问题

在webapps的dist文件夹（打包文件夹）下建立与index.html同级的WEB_INF文件夹

在该文件夹下建立web.xml配置：

<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_4_0.xsd"
  version="4.0"
  metadata-complete="true">

  <display-name>Welcome to Tomcatdisplay-name>
  <description>
     Welcome to Tomcat
  description>

  <error-page>
    <error-code>404error-code>
    <location>/location>
  error-page>

web-app>

保存，即可解决页面刷新报404问题，该配置把404重定向到了当前路径下