vue组件historyApiFallback作用详解
本篇博客主要是详细总结一下vue中的historyApiFallback的作用。
当我们在浏览器中输入一个网址(比如说是：http://www.edit.com),此时会经过dns解析，拿到ip地址然后根据ip地址向该服务器发起请求，服务器接受到请求之后，然后返回相应的结果(html,css,js)。
如果我们在前端设置了重定向，此时页面会进行跳转到http://www.edit.com/home,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话，浏览器会发送新的请求http://www.edit.com/home,如果后端服务器没有/home对应的接口，此时会返回404，但是一般我们配置nginx进行代理，此时在Nginx中进行相关配置，就可以解决该问题。
如下图所示为nginx中进行配置。
该配置的意思就是请求路径对应的接口时，此时就返回首页数据，此时当前端拿到该数据时，此时根据前端路由来匹配相应的组件即可。
本地服务器
如果我们在本地开启服务器，此时当我们进行刷新时，浏览器会拿着该地址localhost:8000/home向本地服务器发起请求，但是本地不存在/home的文件夹，所以会返回404。如下图所示。
但我们刷新时，不会出现错误，原因是vue-cli中默认在webpack中帮我们配置好了
如果我们将其改为false,此时就会出错。
`或者我们也可以在vue.config.js中进行配置``
module.exports = {
configureWebpack: {
devServer: {
historyApiFallback: false
}
}
}
以上就是vue组件historyApiFallback作用详解的详细内容，更多关于vue组件historyApiFallback的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了在vue中获取dom元素内容的方法，可以通过给标签加ref属性，这里整理了详细的代码,有兴趣的可以了解一下2017-07-07
这篇文章主要给大家介绍了关于Vue中使用Lodop插件实现打印功能的简单方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-12-12
这篇文章主要介绍了vue如何使用watch监听指定数据的变化，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,就是在保持代码运行结果不变的前提下,去除无用的代码,本文给大家介绍Vue 3.0中Treeshaking特性是什么,感兴趣的朋友一起看看吧2023-10-10
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.这篇文章主要介绍了vue/axios请求拦截的相关知识,需要的朋友可以参考下2018-03-03
这篇文章主要为大家介绍了Vue中异步请求导致页面数据渲染错误问题解决方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
下面小编就为大家分享一篇vue checkbox 全选 数据的绑定及获取和计算方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
ElementUI时间选择器限制选择范围disabledData的使用
本文主要介绍了ElementUI时间选择器限制选择范围disabledData的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
vue如何导出文件流获取附件名称并下载(在response.headers里解析filename导出)
这篇文章主要介绍了vue如何导出文件流获取附件名称并下载(在response.headers里解析filename导出),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了el-date-picker日期选择限制范围,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
最新评论