1. 前言

1. 上篇文章写了前端部署
2. 部署完 有时候会遇到 404 问题 这次来聊聊
3. 404就是找到不到地址所以一般和前端路由配置有关

---

2. 场景

1. vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误
2. 先定位问题，HTTP 404 错误意味着链接指向的资源不存在
3. 但是呢问题在于为什么不存在？
4. 且为什么只有history模式下会出现这个问题？
5. 打包放到 node+express下面玩的时候或者通过uniApp打包成安卓 iOS 包的时候也注意不要用history模式
   用hash是模式正确的

---

3. Vue是属于单页应用（single-page application）

1. 前端路由
2. 而SPA是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，不管我们应用有多少页面，打包后都只会产出一个index.htm
3. 以 nginx配置为例 前端部署

server {
  listen  80;
  server_name  www.yzs.com;

  location / {
    index  /data/dist/index.html;
  }
}

1. 可以根据 nginx 配置得出，当我们在地址栏输入 www.yzs.com时，这时会打开我们 dist 目录下的 index.html 文件，
2. 然后我们在跳转路由进入到 www.yzs.com/login

3. 关键在这里，当我们在 yzs.com/login 页执行刷新操作，
   nginx location 是没有相关配置的，
   所以就会出现 404 的情况

---

4. 为什么hash模式下没有问题

1. router hash 模式我们都知道是用符号#表示的，
   如 yzs.com/#/login, hash 的值为 #/login

2. hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面

3. hash 模式下，仅 hash 符号之前的内容会被包含在请求中，
   如 yzs.com/#/login 只有 yzs.com 会被包含在请求中 ，
   因此对于服务端来说，即使没有配置location，也不会返回404错误

---

5. 解决方案

1. 定位问题:产生问题的本质是因为我们的路由是通过JS来执行视图切换的,
   当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404

2. 所以我们只需要配置将任意页面都重定向到 index.html，把路由交由前端处理
   也就是 部署的时候 不要忘记配置路由

3. 对nginx配置文件.conf修改，添加try_files uri/ /index.html;

对nginx配置文件.conf修改，添加try_files $uri $uri/ /index.html;

• 修改完配置文件后记得配置的更新

nginx -s reload

*注意 为了避免这种情况 前端配置 404 页面

  {
    path:"/notfound",
    name:"NotFound",
    component:()=>import("../views/NotFound.vue")
  },
  {
    // vue-router 3x
    // path:"*"
    
    // vue-router 4x
    path:"/:pathMatch(.*)/",
    // redirect 重定向 
    // redirect:"/notfound"
    redirect:{
      name:"NotFound",
      // path:"/notfound"
    }
  }

• 其他 服务器Apache、nodejs 配置也都差不离

1. 对于 Apache 服务器，可以使用 .htaccess文件来配置路由重定向

---

• 其他原因导致的404

---

6. 静态资源路径问题

1. 以上属于 路 由配置问题的范畴 还有其他原因也会导致 404

2. 当部署 Vue 项目时，确保服务器正确地提供静态资源文件（如 JavaScript、CSS 和图片等）。如果路径配置不正确，浏览器无法正确加载这些静态资源，导致 404 错误

• 解决方案

1. 检查部署后的静态资源路径是否与 Vue 项目中的路径一致。
2. 可以尝试使用绝对路径或相对路径来引用静态资源，确保路径的正确性。
3. 同时，检查服务器的静态资源配置，确保服务器能够正确提供这些资源。

---

7. 索引文件缺失

1. vue 项目通常会有一个入口文件（如 index.html），用于加载 Vue 应用的 JavaScript 文件和其他静态资源。404 错误
2. 如果部署后缺少这个索引文件，或者服务器没有正确配置以提供该文件，刷新页面时会导致 404 错误

• 解决方案

1. 检查部署后的文件是否包含正确的入口文件，如 index.html。
2. 确保服务器配置正确，可以通过服务器的默认文档（如 Apache 的 DirectoryIndex）或其他方式指定入口文件。

---

8. 缓存问题

1. 有时浏览器可能会缓存旧版本的静态资源，而不是从服务器重新获取更新后的文件。
2. 当部署新版本时，浏览器仍然使用旧版本的缓存文件，导致请求的资源无法找到

• 解决方案

1. 在部署新版本后，可以使用一些方法来强制浏览器重新获取最新的静态资源。
2. 例如，可以通过修改文件名、添加查询参数或使用版本号等方式，使浏览器认为这是一个新的资源，从而不使用缓存的旧版本

---

9. 还不行 呢? 咋知道是哪种呢?

1. 查看服务器的日志文件呗

---

参考资料

前端部署
前端路由

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉