iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue history模式刷新404原因及解决方法
  • 735
分享到

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

2024-04-02 19:04:59 735人浏览 安东尼
摘要

目录项目场景:问题描述原因分析:第一步第二步总结项目场景: 提示:这里简述项目相关背景: Vue项目路由history模式 问题描述 提示:这里描述项目中遇到的问题: vue his

项目场景:

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

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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue history模式刷新404原因及解决方法

本文链接: https://www.lsjlt.com/news/166537.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作