Vue3项目Nginx部署404问题解决方案

1. 问题现象与初步分析

今天在Windows Server上部署yudao-ui-admin-vue3项目时遇到了一个典型的前端资源404问题。浏览器控制台报错显示GET http://192.168.1.206/logo.gif 404 (Not Found)，这意味着Nginx服务器无法找到前端项目中的静态资源文件。

这个错误看似简单，但实际上涉及多个关键知识点：

• 前端项目的打包路径配置
• Nginx的root与alias指令区别
• 静态资源在子目录部署时的路径处理
• Vue项目的环境变量配置

提示：404错误在部署过程中极为常见，但不同框架、不同部署方式下的解决方案差异很大，需要具体问题具体分析。

2. 环境准备与项目结构

2.1 项目基本情况

yudao-ui-admin-vue3是一个基于Vue3的后台管理系统前端项目，使用Vite作为构建工具。项目采用前后端分离架构，前端需要单独部署到Web服务器（这里是Nginx）。

典型的前端项目打包后会生成dist目录，包含：

code复制dist/
├── assets/
│   ├── logo.gif
│   └── (其他静态资源)
├── index.html
└── (其他构建文件)

2.2 Nginx安装与配置基础

在Windows上安装Nginx的步骤：

1. 从官网下载Windows版Nginx压缩包
2. 解压到任意目录（建议路径不要包含中文和空格）
3. 主要目录结构：

   code复制nginx/
   ├── conf/
   │   └── nginx.conf
   ├── html/
   │   └── (存放前端文件)
   └── nginx.exe
   

基础验证命令：

bash复制# 启动
start nginx
# 快速停止
nginx -s stop
# 重新加载配置
nginx -s reload

3. 问题深度解析

3.1 404错误的根本原因

当浏览器访问http://192.168.1.206/yudao时，按以下顺序发生：

1. 浏览器加载index.html
2. HTML中引用的资源路径为/logo.gif（绝对路径）
3. 浏