黑马点评——前端404

Question

#学黑马点评第一天，访问前端一直404我在社区找了一堆解决方案都不行，最后我看了nignx的错误日志，后面发现好像是前端请求的doc.html文件不存在，访问这个路径出错，但是我是刚下的源码。所以，是我源码不完整吗？有人知道怎么解决吗？

Answer 1

晚上好🌙🌙🌙
本答案参考通义千问

你遇到的问题是前端访问时出现404错误，特别是在访问 doc.html 文件时。这可能与以下几个原因有关：

---

一、问题分析

1. 源码是否完整？

   • 你提到是“刚下的源码”，但并没有说明是从哪里下载的。
   • 如果是从GitHub等平台下载的项目，有可能未正确克隆或部分文件被忽略（如 .gitignore 中排除了某些文件）。

2. Nginx 配置是否正确？

   • 如果使用 Nginx 进行反向代理或静态资源托管，配置错误会导致页面找不到。
   • 特别是如果你在访问 doc.html，而该文件在实际项目中并不存在，可能是路径配置不正确。

3. 前端项目构建是否完成？

   • 如果你使用的是 Vue、React 或其他框架，需要先执行构建命令（如 npm run build），生成 dist/ 或 build/ 目录中的静态文件。
   • 如果没有构建就直接运行，可能会导致页面找不到。

---

二、解决方案

1. 检查源码完整性

• 确认你从官方或可靠渠道下载了完整的项目。
• 查看项目目录结构是否有缺失文件，特别是 doc.html 所在目录。
• 如果你是从 GitHub 克隆的，确保使用 git clone 命令，并检查 .gitignore 文件是否忽略了不该忽略的文件。

2. 检查前端构建过程

• 如果是 Vue 项目：

  # 安装依赖
  npm install
  
  # 构建项目
  npm run build
  
  # 构建后的文件会放在 dist/ 目录下
  

• 如果是 React 项目：

  # 安装依赖
  npm install
  
  # 构建项目
  npm run build
  
  # 构建后的文件会放在 build/ 目录下
  

• 确认构建后部署到 Nginx 的路径是否正确。

3. 检查 Nginx 配置文件

• 打开 Nginx 的配置文件（通常位于 /etc/nginx/conf.d/ 或 /etc/nginx/sites-available/）。

• 确保配置如下（以 Vue 项目为例）：

  server {
      listen 80;
      server_name yourdomain.com;
  
      location / {
          root /path/to/your/dist;  # 替换为你的构建目录
          index index.html;
          try_files $uri $uri/ /index.html;
      }
  
      # 如果有 API 接口，可以配置反向代理
      location /api/ {
          proxy_pass http://localhost:8080;  # 后端服务地址
      }
  }
  

• 注意：不要直接访问 doc.html，而是通过 index.html 加载整个应用。

4. 检查请求路径是否正确

• 在浏览器中访问的 URL 应为：

  http://yourdomain.com/
  

  而不是：

  http://yourdomain.com/doc.html
  

  • 如果你手动输入了 doc.html，那是因为你可能误以为它是入口文件，但实际上应该是 index.html。

---

三、常见错误排查步骤

1. 查看 Nginx 错误日志：

   tail -f /var/log/nginx/error.log
   

   • 日志中会显示具体哪个文件找不到或权限不足。

2. 检查构建输出目录是否存在：

   • 确认 dist/ 或 build/ 目录中有 index.html 文件。

3. 尝试直接访问 index.html：

   • 如果访问 http://yourdomain.com/index.html 也报 404，说明 Nginx 配置或文件路径有问题。

---

四、修改后的 Nginx 配置示例（适用于 Vue 项目）

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        root /opt/vue-project/dist;  # 替换为你的项目构建目录
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 如果有后端接口，可以配置反向代理
    location /api/ {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

---

五、总结

| 问题 | 解决方案 | |------|----------| | 源码不完整 | 重新下载完整项目，检查目录结构 | | 未构建项目 | 执行 npm run build 生成静态文件 | | Nginx 配置错误 | 检查 root 和 try_files 配置 | | 访问路径错误 | 不要直接访问 doc.html，应访问 index.html |

---

如果你能提供具体的项目类型（Vue、React、Angular 等）、Nginx 配置片段或错误日志内容，我可以给出更精确的建议。