解决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配置:
在这里插入图片描述

<?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>

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

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CharmDeer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值