【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压缩
  • 七、常见问题排查