解决Vue项目history模式下打包部署到云服务器，访问路径，重复点击路由，刷新报404异常的问题！！！_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,
  }
}
//项目发布时的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这个配置有什么用呢，如果没有这个配置，你打包的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)
}
1
2
3
4
5

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

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

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

<?xml version="1.0" encoding="UTF-8"?>
<!--
 Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<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 Tomcat</display-name>
  <description>
     Welcome to Tomcat
  </description>

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

</web-app>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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