Windows系统使用Nginx部署Vue
Nginx是什么？
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器 ，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。
优点
- 速度更快、并发更高
- 配置简单，扩展性强
- 高可靠性
- 热部署
- 成本低、BSD许可证
安装
下载地址:http://nginx.org/en/download.html
解压后目录如下：
启动
-
双击nginx.exe,会有黑窗闪过。
-
用cmd命令窗口，cd 到nginx解压目录，
./nginx启动。 -
在浏览器中访问
http://localhost:80,出现以下界面说明启动成功(由于笔者电脑80端口被占用，所以更改为8080，nginx默认为80端口)。
部署Vue项目
- 将build后的文件夹放到nginx目录下的html文件夹当中。
- 修改nginx.conf配置文件。
- 配置访问地址。
其他常用配置
跨域配置
代码：
location /api {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 后台接口地址
proxy_pass http://192.168.8.216:10000/api;
proxy_redirect default;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
文件上传大小配置
代码：
client_max_body_size 50m; # 限制请求体的大小，若超过所设定的大小，返回413错误，默认1m
client_header_timeout 1m; # 读取请求头的超时时间，若超过所设定的大小，返回408错误
client_body_timeout 1m; # 读取请求实体的超时时间，若超过所设定的大小，返回413错误
proxy_connect_timeout 60s; # http请求无法立即被容器(tomcat, netty等)处理，被放在nginx的待处理池中等待被处理。此参数为等待的最长时间，默认为60秒，官方推荐最长不要超过75秒
proxy_read_timeout 1m; # http请求被容器(tomcat, netty等)处理后，nginx会等待处理结果，也就是容器返回的response。此参数即为服务器响应时间，默认60秒
proxy_send_timeout 1m; # http请求被服务器处理完后，把数据传返回给Nginx的用时，默认60秒
Nginx部署Vue项目刷新404问题
代码：
location / {
root html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
autoindex on;
}
多项目部署（不同端口）
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 10800;
server_name 192.168.8.216;
location / {
root html/dist;
index index.html index.htm;
}
location /api {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 后台接口地址
proxy_pass http://192.168.8.216:9999/DataDisplay;
proxy_redirect default;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
# error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
server {
listen 10001;
server_name 192.168.8.216;
location / {
root html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
autoindex on;
}
location /api {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 后台接口地址
proxy_pass http://192.168.8.216:10000/api;
proxy_redirect default;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
# error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
常用命令
| 序号 | 命令 | 功能 |
|---|---|---|
| 1 | taskkill /im nginx.exe /f | 关闭所有nginx进程 |
| 2 | tasklist | find /i “nginx.exe” || exit | 查看nginx的进程使用情况 |
| 3 | taskkill /pid 1234 /f | 关闭指定进程 |
| 4 | ./nginx | 启动 |
| 5 | ./nginx -s stop | 停止 |
| 6 | ./nginx -s quit | 安全退出 |
| 7 | ./nginx -s reload | 重新加载配置文件 |
完整配置
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
client_max_body_size 400m;
client_header_timeout 5m;
client_body_timeout 5m;
proxy_connect_timeout 6000s;
proxy_read_timeout 5m;
proxy_send_timeout 5m;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 10800;
server_name 192.168.8.216;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/dist2;
index index.html index.htm;
}
location /api {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 后台接口地址
proxy_pass http://192.168.8.216:9999/DataDisplay;
proxy_redirect default;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
server {
listen 10001;
server_name 192.168.8.216;
location / {
root html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
autoindex on;
}
location /api {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 后台接口地址
proxy_pass http://192.168.8.216:10000/api;
proxy_redirect default;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
Nginx开机自启
原理
通过 Windows Service Wrapper 工具，将Nginx转换为Windows服务，Windows系统重启后会自动启动Nginx服务。
实现方法
-
下载
Windows Service Wrapper工具，地址：https://github.com/winsw/winsw/releases，根据系统版本下载对应工具。百度云：https://pan.baidu.com/s/1_olg0NN4lvhC5bmnZIoZ5w 提取码：polf
-
将工具放到Nginx安装目录并命名为
nginx-service.exe。 -
在Nginx目录新建服务日志文件夹
server-logs文件夹。 -
新建
nginx-service.xml文件，写入配置文件。整体目录如下:
配置文件如下：主要包含日志位置、启动和关闭，目录根据自己安装位置调整（不要有中文）。
<!-- nginx-service.xml -->
<service>
<id>nginx</id>
<name>nginx</name>
<description>nginx</description>
<logpath>E:\nginx-1.25.1\server-logs\</logpath>
<logmode>roll</logmode>
<depend></depend>
<executable>E:\nginx-1.25.1\nginx.exe</executable>
<stopexecutable>E:\nginx-1.25.1\nginx.exe -s stop</stopexecutable>
</service>
- 将nginx加载到Windows服务中。在nginx安装目录以管理员身份启用CMD输入：
.\nginx-service.exe install
- 在Windows服务中找到nginx服务，将启动方式改成自动并将其启动。
- 通过浏览器访问项目地址，检查是否启动成功。
Windows Service Wtapper 命令
| 命令 | 功能 |
|---|---|
| nginx-service.exe install | 注册系统服务 |
| nginx-service.exe uninstall | 删除已注册系统服务 |
| nginx-service.exe stop | 关闭服务 |
| nginx-service.exe start | 启动服务 |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具