Nginx部署Vue项目，网页界面返回404 Not Found
描述：
Windows Sever服务器 使用Nginx部署Vue项目，其中Nginx端口设置81，http://localhost:81可以访问，但是http://localhost:81/TechnicalArticle却返回404 Not Found
问题原因：
Vue 项目在部署后，通常只有一个入口文件 index.html。Vue Router 在 history 模式下，像 /TechnicalArticle 这样的路径在前端路由中是存在的，但在服务器上并没有对应的物理文件或目录。
当你直接在浏览器地址栏输入 http://localhost:81/TechnicalArticle 并回车时，浏览器会向 Nginx 请求这个路径的资源。Nginx 默认会尝试在它的根目录下寻找名为 TechnicalArticle 的文件或文件夹，结果当然是找不到，于是返回 404。
解决：
在nginx配置文件中添加一条指令：
重新加载nginx就可以。
AI回答：
🔧 配置 Nginx 接管路由
解决这个问题的核心思路是：让 Nginx 对于不存在的路径，都返回 Vue 应用的入口文件 index.html，然后由 Vue Router 接管并解析正确的路由。
你需要修改 Nginx 的配置文件（通常名为 nginx.conf 或在你 conf.d 目录下的自定义配置文件）。以下是几种常见的配置方法，你可以根据喜好选择一种。
| 配置方法 | 说明 | 优点 |
|---|---|---|
try_files 指令 | 按顺序检查文件是否存在，最终均指向 index.html |
| 推荐，语法直观，配置简洁 | |
try_files + 命名Location | 通过 @router 命名位置进行重写 |
| 逻辑清晰，可读性好 |
下面是具体的配置示例，你只需要在 server 块中找到 location / 部分，并进行修改。
方法一：使用 try_files 指令（推荐）
这是最常用和简洁的配置方式
。
nginx
server {listen 81;server_name localhost;root /your/vue/project/dist; # 请替换为你的Vue项目dist目录的实际路径index index.html;location / {try_files $uri $uri/ /index.html; # 关键配置}# 可选：如果你的Vue项目需要请求后端API，可以在这里配置代理# location /api/ {# proxy_pass http://your_backend_api_address/;# }
}
-
try_files $uri $uri/ /index.html;：这行配置告诉 Nginx，先尝试寻找与请求URI完全匹配的静态文件（$uri），如果没找到，再尝试寻找同名的目录（$uri/），如果还是没找到，就把请求交给/index.html处理。
方法二：使用 try_files 配合命名 Location
这种方式逻辑更清晰，尤其适合需要添加更多重写规则的复杂场景
。
nginx
server {listen 81;server_name localhost;root /your/vue/project/dist; # 请替换为你的Vue项目dist目录的实际路径index index.html;location / {try_files $uri $uri/ @router; # 先尝试寻找文件，失败则转给 @routerindex index.html;}location @router {rewrite ^.*$ /index.html last; # 将所有请求重写到 index.html}
}
📝 配置生效步骤
-
保存配置：将你选择的配置写入 Nginx 配置文件。
-
检查语法：在终端运行
nginx -t命令，检查配置文件语法是否正确。如果看到syntax is ok和test is successful的提示，就说明配置正确。 -
重载配置：运行
nginx -s reload命令，使新的配置生效，而无需重启整个 Nginx 服务。
完成以上步骤后，再访问 http://localhost:81/TechnicalArticle，页面应该就能正常显示了。
⚠️ 补充说明与提醒
-
路由模式确认：这个解决方案是针对 Vue Router 的
history模式的。如果你的项目使用的是hash模式（URL 中有#），则不会有这个问题，但也无需此配置。 -
配置位置：请确保上述配置是写在
location /块中，并且注意路径的匹配优先级。如果你的 Nginx 配置中还有其他更具体的location块（比如处理 API 代理的location /api/），需要将它们放在location /块之前，因为 Nginx 会优先匹配更具体的规则。 -
路径权限：请确保 Nginx 进程有权限访问你设置的
root目录。