一文教你win系统快速部署nginx及配置vue前端运行环境

本篇文章主要围绕nginx在win系统下的部署及安装的相关操作，通过本篇文章你可以快速完成对nginx部署前端项目的使用能力。
作者：任聪聪
日期：2025年6月8日

一、Nginx介绍及安装说明

Nginx的说明

官网：https://nginx.org/

Nginx 是一款高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。由于其轻量级、高并发处理能力强、配置简单，在前端部署、负载均衡、接口转发等场景中广泛应用。

Ngin的安装

步骤一、进入到官网后点击download进入到版本下载界面，如下：

步骤二、选择我们所需的windows的版本 如下我们选择 1.28版本：

等待下载完毕：

步骤四、解压缩后我们会看到如下目录：

将其剪切移动到我们所需的app目录下如下是我的开发应用目录：

步骤五、设置环境变量，打开我们的环境变量：

进入到环境变量界面：

弹出如下的环境变量信息：

选择我们的path，进入并设置我们的nginx文件目录如下：

设置ngxin的目录：

设置完毕后点击确定即可。

步骤六、验证nginx设置是否成功

输入命令：nginx -v

如果显示如下内容则说明生效了。

步骤七、输入启动命令+运行目录

 nginx -p D:\AppData\nginx-1.28.0\

运行情况：

注意：此刻如果窗口关闭则会停止web服务，故此我们需要将ngxin 放到后台进行运行。

集成到系统服务中使用

使用三方软件进行集成实现，如下是我们即将要用到的三方工具。

官网：https://nssm.cc/

步骤一、进入到nssm官网后，进入到下载页进行选择下载MSSM版本，如下图：

下载后你将的到如下类型的文件：

解压缩后进入到步骤二。

步骤二、将解压缩后的文件同样放到自己固定的开发软件目录下并配置环境变量

配置环境变量，根据自己的系统位数选择版本如下图：

设置完毕后进入到步骤三进行安装nginx服务。

步骤三、检验nssm是否生效，输入如下命令：

如上如果显示则是有效。

步骤四、开始安装nginx服务 ，输入如下命令进行：

nssm install nginx 

运行后将显示如下设置弹出框。

配置信息如下，根据自己的实际安装目录来进行即可：

设置完毕后，点击 install service 按钮 ，如果提示如下信息则说明安装完毕:

步骤五、使用服务进行启动，并设置开机启动。

设置开机启动服务命令：

sc config nginx start= auto

运行效果：

启动服务命令：

sc start nginx

至此后续仅需输入sc 命令即可管理服务，无需每次开机使用nginx命令重启。

二、Nginx的使用教程

配置默认规则目录

说明：conf，主要存放我们的nginx的配置信息，启动nginx.conf，可配置我们的根目录以及相应的网站配置信息，以及加载更多的网站配置文件的入口。

伪静态说明

说明：帮助我们实现诸如动态网站路径情况下的代理路由实现，通常在seo、搜索引擎优化情况下我们才会使用到。

拿有穹OA的Thinkphp伪静态举例，书写规则如下：

location / {
	if (!-e $request_filename){
		rewrite  ^(.*)$  /index.php?s=$1  last;   break;
	}
}

基本形式：

rewrite ^/article/([0-9]+)\.html$ /article.php?id=$1 last;

通常以rewrite 进行编写规则 配合if 及其他逻辑判断语法实现，规则路径中可使用代替符号进行更进一步的大范围的匹配。

重定向

301 重定向 永久

server {
    listen 80;
    server_name youqiong.net;

    return 301 https://www.youqiong.net$request_uri;
}

302 重定向 临时

server {
    listen 80;
    server_name youqiong.net;

    return 302 https://www.youqiong.net$request_uri;
}

注意：这里的临时重定向和永久重定向是基于协议的，两者在效果上一致，但是作用不一样，主要体现在协议形式及搜索引擎所规定的权重而定。

性能配置说明

说明：一般在我们的conf目录下的nginx.conf的配置文件中进行配置。

主要配置和优化部分的参数说明如下：

# 设置工作进程数量，auto 表示根据 CPU 核心数自动设置
worker_processes auto;

# 每个 worker 进程允许的最大并发连接数（单位是连接，不是请求）
worker_connections 10240;

events {
    # 指定事件驱动模型：
    # Windows 下只能使用 select，Linux 推荐使用 epoll（高并发更高效）
    use select;
}

http {
    # 启用高效文件传输方式，零拷贝技术，提升大文件响应效率
    sendfile on;

    # 与 sendfile 配合，优化 TCP 包发送，减少慢启动影响
    tcp_nopush on;

    # 禁用 Nagle 算法，减少延迟（实时性要求高的连接推荐开启）
    tcp_nodelay on;

    # 保持连接时间，单位为秒，长连接可以减少 TCP 握手开销
    keepalive_timeout 65;

    # 开启 Gzip 压缩，提高带宽利用率，提升访问速度
    gzip on;

    # 设置压缩最小长度，1k 以下的内容不压缩
    gzip_min_length 1k;

    # 指定需要压缩的内容类型（常见文本格式）
    gzip_types text/plain application/json text/css application/javascript;

    # 设置请求限流区域：
    # - 每个客户端（IP）地址
    # - 存储空间为 10MB
    # - 限制速率为 10 个请求/秒
    limit_req_zone $binary_remote_addr zone=req_limit_per_ip:10m rate=10r/s;

    # 引入 MIME 类型配置文件，识别不同扩展名的 Content-Type
    include mime.types;

    # 默认的 Content-Type，当无法识别文件类型时使用
    default_type application/octet-stream;

    # 配置访问日志路径
    access_log logs/access.log;
}

网站配置

步骤一、在conf目录下新创建一个website的目录如下图：

步骤二、在我们的wbesite中创建两个conf文件，one.conf、two.conf。

步骤三、在我们的conf文件目录下，打开我们的nginx.conf，设置加载我们的多网站配置目录。

代码信息：

  # 引入 website 子目录下的所有站点配置
    include website/*.conf;

步骤四、打开我们的one.conf 配置我们的项目配置信息，端口设置为8100和8101两个。

第一个网站：

server {
    listen 8100;
    server_name site-a.local;

    root F:\test\one;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    access_log logs/site-a.access.log;
    error_log logs/site-a.error.log;
}

第二个网站：

server {
    listen 8101;
    server_name site-b.local;

    root F:\test\two;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    access_log logs/site-a.access.log;
    error_log logs/site-a.error.log;
}

步骤五、创建我们的网站命令并填写我们的网站首页内容如下：

完成后，cd 目录 到nginx 目录下 输入如下命令nginx -t进行验证nginx配置是否无错且有效：

如果有效，如上图一样，则重新启动：

nginx -s reload

运行效果：

其他类型项目部署

1.PHP项目

server {
    listen 8100;
    server_name site-a.local;

    root F:/your_project;  # 项目路径
    index index.php index.html;

    access_log logs/site-a.access.log;
    error_log logs/site-a.error.log;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        root F:/your_project;
        fastcgi_pass 127.0.0.1:9000;  # php-cgi 启动的端口
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

注意：还需要配置部分php相关的参数即可。

2.vue项目

说明：将打包好的静态包，放入到目录下即可，配置一般如下：

server {
    listen 8200;
    server_name vue.local;

    root F:/vue-project/dist;
    index index.html;

    access_log logs/vue.access.log;
    error_log logs/vue.error.log;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

三、常见问题

1、无法重启情况

注意检查conf的文件语法，尝试使用命令nginx -t -p D:\AppData\nginx-1.28.0\验证配置文件是否存在问题。

2、配置设置保存后未生效情况

使用如下命令进行重置。

nginx -s reload -p D:\AppData\nginx-1.28.0\

3、SC Nssm工具操作nginx启动、关闭、删除的命令

sc start nginx 启动服务
sc stop nginx  停止服务
sc delete nginx 删除服务
nssm install nginx 安装服务

4、查看nginx服务情况

说明：如果不知道nginx有没有运行，或者占用内存的使用情况时可以输入如下的命令实现查询。

tasklist /FI "IMAGENAME eq nginx.exe"

运行效果：

5、无法关闭nginx的解决方法

说明：遇到无法通过命令行进行关闭的情况，直接使用任务管理器，直接搜索nginx直接结束进程。

6、nssm安装报错无权限

说明：通过管理员权限进行运行即可解决问题。

7、使用环境变量且无需设置目录的方法

说明：不适用nssm服务也可用过环境变量实现nginx的控制，当然也可以不需要设置目录进行启动和操作。

步骤一、创建bat文件 ，并在nginx目录下创建bin_cc的目录如下:

创建如下四个bat文件：

start-nginx.bat

@echo off
chcp 65001 >nul
setlocal
set NGINX_HOME=D:\AppData\nginx-1.28.0
echo 启动 Nginx...
%NGINX_HOME%\nginx.exe -p %NGINX_HOME% -c %NGINX_HOME%\conf\nginx.conf
echo 启动完成。
endlocal
pause

stop-nginx.bat

@echo off
chcp 65001 >nul
setlocal
set NGINX_HOME=D:\AppData\nginx-1.28.0
echo 停止 Nginx（正常退出）...
%NGINX_HOME%\nginx.exe -s quit
echo 停止完成。
endlocal
pause

reload-nginx.bat

@echo off
chcp 65001 >nul
echo 正在重载 Nginx 配置...

set NGINX_HOME=D:\AppData\nginx-1.28.0
%NGINX_HOME%\nginx.exe -p %NGINX_HOME% -c conf/nginx.conf -s reload

if %errorlevel%==0 (
    echo 配置重载成功。
) else (
    echo 配置重载失败，请检查配置文件路径和语法。
)

pause

restart-nginx.bat

@echo off
chcp 65001 >nul
setlocal
set NGINX_HOME=D:\AppData\nginx-1.28.0
echo 重启 Nginx...
echo 停止中...
%NGINX_HOME%\nginx.exe -s quit
timeout /t 2 >nul
echo 启动中...
%NGINX_HOME%\nginx.exe -p %NGINX_HOME% -c %NGINX_HOME%\conf\nginx.conf
echo 重启完成。
endlocal
pause

start-nginx-hide 隐藏启动方式

@echo off
:: 检查是否在隐藏模式运行
if "%1"=="hide" goto START

:: 重新用 wscript 启动自身，隐藏窗口
wscript //nologo "%~f0" //B hide
exit

:START
:: 设置 NGINX 路径
set NGINX_HOME=D:\AppData\nginx-1.28.0
:: 启动 Nginx
%NGINX_HOME%\nginx.exe -p %NGINX_HOME% -c %NGINX_HOME%\conf\nginx.conf

步骤二、设置环境变量 目录设置到bin_cc 如下图：

完成后我们重新打开cmd，即可使用如下四个命令：

start-nginx
restart-nginx
reload-nginx
stop-nginx
start-nginx-hide

运行效果：

8、报错目录情况

报错情况：

解决办法：

创建这个目录即可。