【Nginx】在Windows服务器上用Nginx部署Vue前端全流程（附避坑指南）

【Nginx】在Windows服务器上使用Nginx部署Vue前端全流程（附避坑指南）

关键词：Windows Nginx配置Vue、Vue项目打包部署、前端服务器部署教程
适合人群：前端开发者 | 运维新手 | 需要快速上线项目者

文章目录

• 【Nginx】在Windows服务器上使用Nginx部署Vue前端全流程（附避坑指南）
• • @[toc]
  • 一、环境准备：3分钟完成基础配置
  • • 1.1 安装Node.js
    • 1.2 检查Vue项目
  • 二、打包Vue项目：生成静态文件
  • • 2.1 执行打包命令
    • 2.2 压缩dist文件夹
  • 三、在Windows服务器上部署Nginx
  • • 3.1 下载Nginx Windows版
    • 3.2 放置Vue文件
  • 四、配置Nginx：关键代码段详解
  • • 4.1 配置 HTTPS 和域名
    • • 4.1.1 申请 SSL 证书
      • 4.1.2 配置 Nginx 支持 HTTPS
      • 4.1.3 配置域名解析
    • 4.2 配合后端的操作
    • • 4.2.1 跨域问题
      • 4.2.2 后端 API 接口路径配置
      • 4.2.3 后端服务器配置
  • 五、启动Nginx并验证
  • • 5.1 启动 Nginx 服务
    • 5.2 停止 Nginx 服务
    • 5.3 查看 Nginx 是否启动
    • 5.4 检查端口占用
    • 5.5 访问测试
  • 六、高级配置（可选）
  • • 6.1 设置开机自启动
    • 6.2 开启Gzip压缩
  • 七、常见问题排查

一、环境准备：3分钟完成基础配置

1.1 安装Node.js

从官网下载Node.js LTS版本（推荐16.x以上），双击安装：

⚠️ 安装时务必勾选 Add to PATH 选项！

如果不放心或者如果后续持续使用的话，可以参考这一篇文章，教程更为详细，更加便捷的管理Node。

全网最细！使用nvm管理node（从node卸载到node安装使用一文搞定）nrm管理npm源

1.2 检查Vue项目

确保本地 Vue 项目能正常运行：

首先，需要安装程序运行所需的依赖，在项目根目录下打开命令行工具（如 Windows 的命令提示符或 PowerShell），然后执行以下命令：

npm install

关于 npm install 命令的详细说明：
npm install 命令在安装依赖时，会根据 package.json 文件中列出的依赖项进行下载和安装。这个过程通常需要联网操作，并且依赖于 npm 仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。如果网络不好，可能会出现安装失败或安装缓慢的情况，此时可以尝试切换 npm 源（可使用 nrm 进行管理）或者稍后再试。

安装完依赖后，就可以运行程序了，执行以下命令之一：

npm run serve
或者
npm run dev

如果你不确定该使用哪个命令，可以在项目文件中找到 package.json 文件，这个文件中有一段 scripts 的 json 数据，一般来说，使用第一个配置的命令就可以了。如图所示，这里执行 npm run dev 即可。

二、打包Vue项目：生成静态文件

2.1 执行打包命令

在项目根目录下的命令行工具中运行：

npm run build

成功后生成 dist 文件夹：

2.2 压缩dist文件夹

右键点击 dist 文件夹，选择压缩为 zip 文件，这样方便上传到服务器。上传服务器后，建议将这个文件夹放到 Nginx 目录中的 html 文件夹下。

三、在Windows服务器上部署Nginx

3.1 下载Nginx Windows版

访问Nginx官网，选择 nginx/Windows-x.x.x：

将下载的文件解压到服务器目录（如 C:\nginx）。

3.2 放置Vue文件

将之前压缩并上传的 dist 文件夹复制到 C:\nginx\html 目录下：

四、配置Nginx：关键代码段详解

打开 C:\nginx\conf\nginx.conf，修改 server 块：

server {
    listen       80;
    server_name  your_domain.com;  # 替换为实际域名或IP

    location / {
        root   html/dist;          # Vue打包文件的路径
        index  index.html;
        try_files $uri $uri/ /index.html;  # 解决Vue路由404问题
    }
    
    location /prod-api/ {
		proxy_set_header Host $http_host;
		proxy_set_header X-Real-IP $remote_addr;
		proy_set_header REMOTE-HOST $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://localhost:8080/;
	}

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}
*🔧 注意使用反斜杠 `html/dist`，而非 `/html/dist`*

注意：nginx.conf修改后需要重启nginx才会生效。

4.1 配置 HTTPS 和域名

4.1.1 申请 SSL 证书

要使用 HTTPS，首先需要申请 SSL 证书。以下是一些常见的 SSL 证书申请途径：

• 免费证书：可以通过 Let’s Encrypt 来申请免费的 SSL 证书。Let’s Encrypt 提供了多种客户端工具，其中 Certbot 是比较常用的一个。你可以参考 Certbot 的官方文档（https://certbot.eff.org/）来进行安装和使用。
• 付费证书：一些商业证书颁发机构（CA）如 Comodo、Symantec 等提供付费的 SSL 证书，这些证书可能提供更高的安全性和更广泛的浏览器兼容性。你可以根据自己的需求选择合适的证书类型并按照 CA 的指引进行申请。

4.1.2 配置 Nginx 支持 HTTPS

在申请到 SSL 证书后，通常会得到一个证书文件（如 fullchain.pem）和一个私钥文件（如 privkey.pem）。将这两个文件放到一个安全的目录下，例如 C:\nginx\ssl。

然后打开 C:\nginx\conf\nginx.conf，添加一个新的 server 块来配置 HTTPS：

server {
    listen       443 ssl;  # 监听443端口，启用SSL
    server_name  your_domain.com;  # 替换为实际域名

    # SSL证书和私钥的路径
    ssl_certificate      C:/nginx/ssl/fullchain.pem;
    ssl_certificate_key  C:/nginx/ssl/privkey.pem;

    # 推荐的SSL配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:TLS_CHACHA20_POLY1305_SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384';
    ssl_prefer_server_ciphers on;

    location / {
        root   html/dist;          # Vue打包文件的路径
        index  index.html;
        try_files $uri $uri/ /index.html;  # 解决Vue路由404问题
    }

    location /prod-api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8080/;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

同时，为了将 HTTP 请求自动重定向到 HTTPS，可以在原有的 HTTP server 块中添加重定向配置：

server {
    listen       80;
    server_name  your_domain.com;  # 替换为实际域名

    return 301 https://$server_name$request_uri;  # 重定向到HTTPS
}

4.1.3 配置域名解析

要让用户通过域名访问你的网站，还需要进行域名解析。你需要登录你的域名注册商提供的管理控制台，找到域名解析设置的页面，添加一条 A 记录或 CNAME 记录：

• A 记录：如果你的服务器有公网 IP 地址，添加一条 A 记录，将域名指向服务器的公网 IP 地址。
• CNAME 记录：如果你的服务器使用了 CDN 等服务，可能需要添加 CNAME 记录，将域名指向 CDN 提供的域名。

4.2 配合后端的操作

如果你的 Vue 前端项目需要与后端进行交互，以下是一些常见的配置和注意事项：

4.2.1 跨域问题

在开发环境中，前端和后端可能运行在不同的端口或域名下，会遇到跨域问题。在生产环境中，通常需要通过 Nginx 来解决跨域问题。

在 Nginx 的配置中，我们可以通过添加一些代理配置来实现跨域请求的转发。例如，前面配置的 /prod-api/ 就是一个代理配置示例：

location /prod-api/ {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://localhost:8080/;  # 后端服务的地址
}

这里将所有以 /prod-api/ 开头的请求转发到后端服务（假设后端服务运行在 http://localhost:8080）。

4.2.2 后端 API 接口路径配置

在 Vue 项目中，需要确保 API 请求的路径与 Nginx 的代理配置一致。例如，如果 Nginx 配置的代理路径是 /prod-api/，那么在 Vue 项目中的 API 请求路径也应该以 /prod-api/ 开头。

可以在 Vue 项目的 axios 或其他 HTTP 请求库的配置中设置请求的基础路径：

import axios from 'axios';

const api = axios.create({
    baseURL: '/prod-api',  // 与Nginx的代理路径一致
    timeout: 10000  // 请求超时时间
});

export default api;

4.2.3 后端服务器配置

后端服务器需要正确处理来自 Nginx 转发的请求。特别是对于一些需要获取客户端真实 IP 地址的场景，需要根据 Nginx 传递的请求头信息来获取。例如，在 Node.js 的 Express 框架中，可以通过以下方式获取客户端真实 IP 地址：

const express = require('express');
const app = express();

app.get('/api/test', (req, res) => {
    const clientIP = req.headers['x-real-ip'] || req.connection.remoteAddress;
    res.send(`Your IP address is: ${clientIP}`);
});

app.listen(8080, () => {
    console.log('Server is running on port 8080');
});

五、启动Nginx并验证

5.1 启动 Nginx 服务

你可以通过以下两种方式启动 Nginx 服务：

• 双击 nginx.exe：在 Nginx 的安装目录下找到 nginx.exe 文件，双击即可启动。
• 命令行运行：打开命令提示符或 PowerShell，执行以下命令：

cd C:\nginx
start nginx

5.2 停止 Nginx 服务

如果需要停止 Nginx 服务，可以在命令行中执行以下命令：

nginx.exe -s stop

5.3 查看 Nginx 是否启动

可以通过查看 \nginx\logs 目录下是否有 nginx.pid 文件来判断 Nginx 是否已启动，有则表示已启动，没有则表示已停止。

5.4 检查端口占用

在命令行中执行以下命令来检查 80 端口（HTTP）或 443 端口（HTTPS）是否被占用：

netstat -ano | findstr :80
netstat -ano | findstr :443

5.5 访问测试

浏览器打开 http://服务器IP，看到Vue页面即成功。

六、高级配置（可选）

6.1 设置开机自启动

创建批处理脚本 start_nginx.bat：

@echo off
C:
cd C:\nginx
start nginx

将脚本放入Windows启动目录 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp。

6.2 开启Gzip压缩

在 nginx.conf 中添加：

gzip on;
	gzip_types text/plain text/css application/json application/javascript text/xml;

七、常见问题排查

🚀 完整nginx.conf配置文件和bat脚本：点击下载
💡 如果遇到其他问题，欢迎在评论区提问！
求三连支持！点赞⭐️ ➕ 收藏📁 ➕ 关注👨💻