vue项目打包后dist部署到Nginx
vue项目 npm run build 打包后部署到nginx服务器
部署步骤
1. 下载并安装Nginx
-
下载Nginx for Windows：
- 访问：http://nginx.org/en/download.html
- 下载
nginx-1.x.x.zip(Windows版本)
-
解压到指定目录：
C:\nginx\
2. 配置Nginx
-
将配置文件放到正确位置：
C:\nginx\conf\nginx.conf
主要是修改conf目录下的nginx.conf文件内容
# 工作进程数（单进程满足基础需求，多核可调整为 CPU 核心数）
worker_processes 1;events {# 单个工作进程最大连接数worker_connections 1024;
}http {# 引入 MIME 类型映射（识别不同文件类型）include mime.types;# 默认文件类型（未识别类型按二进制流处理）default_type application/octet-stream;# 日志配置（保留核心访问日志字段，简化冗余定义）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; # 访问日志路径error_log logs/error.log; # 错误日志路径# 基础性能优化（保留核心参数，删除重复配置）sendfile on; # 启用高效文件传输tcp_nopush on; # 提升静态文件传输效率tcp_nodelay on; # 提升动态请求响应速度keepalive_timeout 65; # 客户端连接超时时间# Gzip 压缩（保留核心压缩配置，精简重复项）gzip on;gzip_vary on;gzip_min_length 1024; # 仅压缩大于 1KB 的文件gzip_proxied any; # 对代理请求也启用压缩gzip_comp_level 6; # 压缩级别（1-9，6 为平衡值）gzip_types text/plain text/css text/xml text/javascriptapplication/json application/javascriptapplication/xml+rss application/atom+xml image/svg+xml;# 核心服务配置（监听 80 端口，部署前端+代理后端）server {listen 80;server_name localhost;root C:/Users/Administrator/Desktop/toolset/frontend/dist; # 前端静态文件路径index index.html; # 默认首页# 1. 前端静态资源处理（含路由兼容+静态资源缓存）location / {try_files $uri $uri/ /index.html; # 解决 SPA 路由刷新 404 问题# 静态资源（JS/CSS/图片等）长期缓存location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {expires 1y;add_header Cache-Control "public, immutable";}}# 2. API 代理（聚合 /api/ 和 /feedback/ 代理逻辑，减少重复）location ~ ^/(api|feedback)/ {proxy_pass http://127.0.0.1:8083$request_uri; # 动态拼接请求路径，避免重复配置# 传递客户端真实信息给后端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_set_header X-Forwarded-Proto $scheme;# 超时与缓冲配置（API 通用设置）proxy_connect_timeout 30s;proxy_send_timeout 30s;proxy_read_timeout 30s;proxy_buffering on;proxy_buffer_size 4k;proxy_buffers 8 4k;}# 3. 健康检查（关闭日志，减少冗余输出）location /health {proxy_pass http://127.0.0.1:8083/health;access_log off;}# 4. 错误页面配置error_page 404 /404.html; # 404 指向前端自定义页面error_page 500 502 503 504 /50x.html; # 服务器错误指向 Nginx 默认 50x 页面location = /50x.html {root html; # 50x.html 所在路径（Nginx 默认 html 目录）}}
}
api接口和dist目录需要做适当修改
-
创建必要的目录：
mkdir C:\nginx\logs mkdir C:\nginx\html
3. 重新打包前端
cd toolset-frontend
npm run build
4. 复制dist目录到服务器
将 toolset-frontend/dist 目录复制到：
C:\Users\Administrator\Desktop\toolset\frontend\dist
5. 启动Nginx
cd C:\nginx
nginx.exe
6. 验证部署
访问以下地址测试：
- 前端页面：http://101.35.132.175
- API接口：http://101.35.132.175/api/health
- 工具分类：http://101.35.132.175/api/tool-category/enabled
完整的部署命令
# 1. 重新打包前端
cd toolset-frontend
npm run build# 2. 复制dist到服务器目录（如果不在同一台机器）
# 将 dist 目录复制到 C:\Users\Administrator\Desktop\toolset\frontend\dist# 3. 启动Nginx
cd C:\nginx
nginx.exe# 4. 检查Nginx状态
tasklist | findstr nginx
验证步骤
1. 检查Nginx是否启动
netstat -an | findstr :80
2. 检查后端是否运行
netstat -an | findstr :8083
3. 测试API代理
curl http://localhost/api/health
常见问题解决
如果Nginx启动失败：
# 检查配置文件语法
nginx.exe -t# 查看错误日志
type C:\nginx\logs\error.log
如果端口80被占用：
# 查找占用80端口的进程
netstat -ano | findstr :80# 批量杀死进程
for /f "tokens=5" %a in ('netstat -ano ^| findstr :80') do taskkill /PID %a /F
# 终止占用进程
taskkill /PID <进程ID> /F
如果API代理不工作：
检查Nginx配置中的 proxy_pass 是否正确指向 http://127.0.0.1:8083/
管理Nginx
# 启动Nginx
nginx.exe# 停止Nginx
nginx.exe -s stop# 重新加载配置
nginx.exe -s reload# 查看Nginx进程
tasklist | findstr nginx