超级会员免费看
本文介绍了在Vue项目中如何切换路由模式至history，并详细讲解了由此引发的404错误、静态资源加载失败、API接口404及开发环境刷新404等问题的解决方案，包括配置nginx、调整Vue配置以及解决前端路由与服务端接口路由冲突。
设置路由mode
router的默认mode为hash模式，关于hash模式，官方文档这样描述：
它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。
– -- 《Vue Router官方文档》
而关于history模式，官方文档是这样说的：
当使用这种历史模式时，URL 会看起来很 “正常”，例如 https://example.com/user/id。漂亮!
这正符合我们的需求。于是在我们的项目中启动路由mode的history模式：
let Router = new VueRouter({
mode: 'history',
routes: [...]
...
});配置服务端nginx
关于history模式，官方文档还提到：
不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。这就丑了。
不用担心：要解决这个问题
订阅专栏 解锁全文
扫一扫
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
