vue history模式刷新404

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

vue history模式刷新404

花与少年丶   2022-09-29 我要评论

项目场景:

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

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
},
},
}

总结

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们