vue history模式刷新404原因及解决方法

更新时间：2022年09月01日 10:03:24 作者：花与少年丶

vue路由的URL有两种模式,一种是 hash,一种是history,下面这篇文章主要给大家介绍了关于vue history模式刷新404原因及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

项目场景：

提示：这里简述项目相关背景：

vue项目路由history模式

问题描述

提示：这里描述项目中遇到的问题：

vue history模式刷新404原因

原因分析：

因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404 解决方案：

第一步

如何切换history模式在router.js中配置

const router = new VueRouter({
mode: ‘history',
base: process.env.BASE_URL,
routes,
// 切换路由后滚动条置顶
scrollBehavior() {
return {
x: 0,
y: 0
}
}
})
export default router

第二步

module.exports = {
publicPath: ‘/', //这个必须，引入静态资源需要从根路径引入，否则会找不到静态资源
devServer: {
// history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
historyApiFallback: {
index: ‘/index.html' //与output的publicPath
},
},
}

总结

到此这篇关于vue history模式刷新404原因及解决的文章就介绍到这了,更多相关vue history模式刷新404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue+vue-validator 表单验证功能的实现代码
这篇文章主要介绍了vue+vue-validator 表单验证功能的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-11-11
Vue2 的 diff 算法规则原理详解
这篇文章主要介绍了Vue2的diff算法规则原理详解，diff 算法，就是通过比对新旧两个虚拟节点不一样的地方，针对那些不一样的地方进行新增或更新或删除操作。接下来我们详细介绍节点更新的过程
2022-06-06
详解vue的hash跳转原理
这篇文章主要介绍了vue的hash跳转原理，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-03-03
手写vue无限滚动指令的详细过程
今天在移动端项目中遇见一个需求,需要数据无限滚动,所以下面这篇文章主要给大家介绍了关于手写vue无限滚动指令的详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
Vue.native如何将原生事件绑定到组件
这篇文章主要介绍了Vue.native如何将原生事件绑定到组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue实现双向数据绑定
这篇文章主要为大家详细介绍了vue实现双向数据绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
vue添加vue-awesome-swiper轮播组件方式
这篇文章主要介绍了vue添加vue-awesome-swiper轮播组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Axios学习笔记之使用方法教程
axios是用来做数据交互的插件，最近正在学习axios，所以想着整理成笔记方便大家和自己参考学习，下面这篇文章主要跟大家介绍了关于Axios使用方法的相关资料，需要的朋友们下面来一起看看吧。
2017-07-07
Vue如何将页面导出成PDF文件
这篇文章主要为大家详细介绍了Vue如何将页面导出成PDF文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
Vue中forEach()的使用方法例子
这篇文章主要给大家介绍了关于Vue中forEach()使用方法的相关资料,forEach和map是数组的两个方法,作用都是遍历数组,在vue项目的处理数据中经常会用到,需要的朋友可以参考下
2023-09-09