目录
首先了解vue项目的路由模式
1. 哈希模式(Hash Mode):
在哈希模式下,路由路径会被设置为 URL 的哈希部分(即 # 后面的部分)。哈希模式不会将路由路径发送到服务器,因此在单页应用中非常适用。Vue 默认采用哈希模式。
2. 历史模式(History Mode):
历史模式使用浏览器的历史 API(`pushState` 和 `replaceState`)来实现路由导航。它会将路由路径直接显示在 URL 中,没有哈希部分。例如:`http://example.com/home`。由于历史模式会将路由发送到服务器,因此需要在服务器端进行配置,以确保在刷新页面或直接访问路由时,能够正确返回应用的入口页面。可以通过设置 `mode: 'history'` 来启用历史模式。
3. 抽象模式(Abstract Mode):
emmmm我也没用到过,暂不描述,想了解的话就查询相关资料吧~
扫描二维码关注公众号,回复:
17214063 查看本文章
进入主题
在nginx中部署history模式的vue项目后,页面刷新后即404,为什么嘞,原因跟简单,举个通俗易懂的例子
- 一个目录下存放了很多个站点,每个站点也都存放在了不同的目录,那么我们想要访问某个站点,实际就是在访问某个目录下的网页。例如我有个域名 aaa.com 访问a1项目则为aaa.com/a1,访问a2项目则为aaa.com/a2,那么采用history,则可以理解为页面刷新后我访问了当前项目下某个目录下的站点,因为没有找到对应站点,所以就404了
- 假设我在router下配置了home的路由,打开了/home的页面,页面刷新重新向服务器发起了请求,那么此home就非彼home了了了了了了
解决方案
在nginx下配置如下代码即可~
location / {
try_files $uri $uri/ /index.html;
}