摘要
vue路由的URL有两种模式,一种是 hash,一种是history,下面这篇文章主要给大家介绍了关于vue history模式刷新404原因及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
目录
- 项目场景：
- 问题描述
- 原因分析：
- 第一步
- 第二步
- 总结
项目场景：
提示：这里简述项目相关背景：
Vue项目路由history模式
问题描述
提示：这里描述项目中遇到的问题：
vue history模式刷新404原因
原因分析：
因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起Http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404 解决方案：
第一步
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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.adminjs.cn！