vue项目history模式 解决nginx页面刷新404问题

目录

首先了解vue项目的路由模式

1. 哈希模式(Hash Mode)：

2. 历史模式(History Mode)：

3. 抽象模式(Abstract Mode)：

进入主题

解决方案

---

首先了解vue项目的路由模式

1. 哈希模式(Hash Mode)：

在哈希模式下，路由路径会被设置为 URL 的哈希部分(即 # 后面的部分)。哈希模式不会将路由路径发送到服务器，因此在单页应用中非常适用。Vue 默认采用哈希模式。

2. 历史模式(History Mode)：

历史模式使用浏览器的历史 API(`pushState` 和 `replaceState`)来实现路由导航。它会将路由路径直接显示在 URL 中，没有哈希部分。例如：`http://example.com/home`。由于历史模式会将路由发送到服务器，因此需要在服务器端进行配置，以确保在刷新页面或直接访问路由时，能够正确返回应用的入口页面。可以通过设置 `mode: 'history'` 来启用历史模式。

3. 抽象模式(Abstract Mode)：

emmmm我也没用到过，暂不描述，想了解的话就查询相关资料吧~

进入主题

在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;
}