Windows 下用 Nginx 部署 Vue + .NET WebApi 全流程实战

很多人以为 Nginx 只能在 Linux 上用。

其实在 Windows 下同样可以部署 Vue 项目，尤其适合：

• 内网系统

• 测试环境

• 小型项目

• 本地服务器部署

今天从 0 到 1 讲清楚：

👉 Vue 如何打包

👉 .NET WebApi 如何发布

👉 Nginx 如何同时代理前端 + 后端

👉 常见问题如何排查

这篇文章适合已经会开发，但对部署还不熟练的人。

---

一、整体架构思路

部署完成后的结构如下：

用户浏览器

↓

Nginx

↓

Vue 静态资源

↓

WebApi（Kestrel）

核心逻辑：

• Vue 打包为静态文件

• WebApi 运行在某个端口（如 5000）

• Nginx：

  • 负责访问前端页面

  • 反向代理接口请求

  • 解决跨域问题

---

二、下载 Nginx（Windows 版）

官网：

https://nginx.org/en/download.htmlhttps://nginx.org/en/download.html

下载 Stable version 稳定版本。

解压到：

D:\nginx

---

三、Vue 项目部署

在 Vue 项目目录执行：

npm run build

生成：

dist/

把 dist 文件夹复制到服务器，例如：

D:\vue\dist

---

四、发布 .NET WebApi

在 WebApi 项目目录执行：

dotnet publish -c Release -o ./publish

将 publish 文件夹复制到服务器，例如：

D:\api

假设运行地址：

http://localhost:5000

---

五、配置 Nginx

打开：

D:\nginx\conf\nginx.conf

找到 server 段，修改为：

server {
    listen       80;
    server_name  localhost;

    # Vue 静态文件
    location / {
        root   D:/vue/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }

    # 反向代理 WebApi
    location /api/ {
        proxy_pass http://localhost:5000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

---

六、启动与停止

进入：

D:\nginx

启动：

start nginx

停止：

nginx -s stop

重载配置：

nginx -s reload

访问：

http://localhost

Windows 下部署 Vue + WebApi，本质就是三步：

1. Vue 打包

2. WebApi 发布并运行

3. Nginx 做静态托管 + 反向代理

---

最后建议：

可以把 Nginx 设置为开机自启，不然每次开机都得start nginx

Windows 2012R2 Nginx 1.24.0 自动启动完整教程_windows 2012 系统 nigix后台服务启动-CSDN博客https://blog.csdn.net/m0_74000869/article/details/156018213?spm=1011.2415.3001.5331