Vue.js踩坑大全

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42756155/article/details/89331675

1、 使用vue-router跳转了路由之后刷新,出现Cannot GET /xxx 的情况

       前端路由有两种,一种是hash模式,一种是history模式。

       hash模式使用URL的hash来模拟一个完整的URL,当URL改变时,页面不会重新加载,url会带有 ,但是在路由中刷新可以正常显示,浏览器会忽略#后面的内容,所以可以正确匹配到资源。

       histroy模式充分利用history.pushState API 来完成 URL 跳转而无须重新加载页面,url比较简洁不带 ,但是跳转路由之后再刷新,就会出现Cannot Get /xxx 的情况。这是因为vue-router设置的路径不是真实存在的路径,本地路径中没有这个真实资源存在(本地测试),服务端也并没有与之对应的路径(打包上线),这些访问资源都是在js里渲染的。

      1)如果本地测试的时候出现这种情况,需要在webpack配置项中的devServer加上:

// 如果 URL 匹配不到任何静态资源,则应该返回index.html 页面
historyApiFallback: {
	index: '/index.html'
}

             这样刷新就不会报错了。

        2)如果是在打包上线的时候出现404的报错,要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面。可以参考官方文档https://router.vuejs.org/zh/guide/essentials/history-mode.html,里面有各个后台配置的例子。

展开阅读全文

没有更多推荐了,返回首页