简介：本文详细讲解如何使用 Nginx 部署 Vue 项目，涵盖环境准备、Vue 构建、Nginx 配置、安全优化等全流程，适合前端开发者及运维人员。

一、引言：为什么选择 Nginx 部署 Vue 项目

在前端工程化日益成熟的今天，Vue.js 作为主流框架之一，其项目部署方案直接影响用户体验和系统稳定性。Nginx 以其高性能、轻量级和灵活的配置特性，成为部署静态资源的首选服务器。本文将通过手把手教学，详细讲解如何将 Vue 项目部署到 Nginx 服务器，涵盖环境准备、构建优化、配置文件编写、安全加固等全流程。

1.1 部署场景与目标

适用场景：生产环境部署、CDN 加速、多环境管理（开发/测试/生产）
核心目标：实现 Vue 项目的静态资源高效托管、路由处理、HTTPS 加密及性能优化

二、环境准备：基础条件检查

2.1 服务器要求

操作系统：Linux（推荐 Ubuntu/CentOS）、Windows Server（可选）
硬件配置：至少 1GB 内存（视项目规模调整）
网络要求：公网 IP 或内网穿透（测试环境）

2.2 软件依赖

Nginx：最新稳定版（通过 nginx -v 检查）
Node.js：LTS 版本（用于构建 Vue 项目）
PM2（可选）：进程管理工具

2.3 安装 Nginx

# Ubuntu/Debian
sudo apt update
sudo apt install nginx
# CentOS/RHEL
sudo yum install epel-release
sudo yum install nginx

验证安装：

sudo systemctl status nginx

三、Vue 项目构建：生产环境优化

3.1 配置 Vue 项目

在 vue.config.js 中设置 publicPath（关键步骤）：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/your-subpath/' : '/',
  outputDir: 'dist', // 构建输出目录
  productionSourceMap: false // 生产环境关闭 source map
}

3.2 构建命令

npm run build

生成的文件结构：

dist/
├── static/
│   ├── css/
│   ├── js/
│   └── media/
├── index.html
└── favicon.ico

3.3 构建优化技巧

代码分割：通过路由懒加载减少首屏加载时间
Gzip 压缩：启用 Nginx 的 gzip_static 模块
CDN 加速：将第三方库（如 Vue、Axios）托管至 CDN

四、Nginx 配置详解：从基础到进阶

4.1 基础配置模板

编辑 /etc/nginx/conf.d/vue-app.conf：

server {
    listen 80;
    server_name yourdomain.com;
    root /path/to/your-project/dist;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
}

4.2 关键配置项解析

try_files：解决 Vue Router 的 History 模式 404 问题
root：必须指向构建后的 dist 目录
缓存策略：对静态资源设置长期缓存，对 HTML 禁用缓存

4.3 HTTPS 配置（Let’s Encrypt 示例）

安装 Certbot：

sudo apt install certbot python3-certbot-nginx

获取证书：
```
sudo certbot --nginx -d yourdomain.com
```
自动续期测试：
```
sudo certbot renew --dry-run
```

4.4 负载均衡配置（多实例部署）

upstream vue_app {
    server 127.0.0.1:3000;
    server 127.0.0.1:3001;
}
server {
    location / {
        proxy_pass http://vue_app;
        proxy_set_header Host $host;
    }
}

五、部署流程：从本地到生产

5.1 手动部署步骤

通过 SCP 上传 dist 目录：

scp -r dist/ user@server:/path/to/project

重启 Nginx：

sudo nginx -t  # 测试配置
sudo systemctl restart nginx

5.2 自动化部署方案（Git Hook + Shell）

创建 .deploy/deploy.sh：

#!/bin/bash
npm run build
rsync -avz --delete dist/ user@server:/path/to/project
ssh user@server "sudo systemctl restart nginx"

5.3 容器化部署（Docker 示例）

Dockerfile 内容：

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

构建并运行：

docker build -t vue-app .
docker run -d -p 80:80 vue-app

六、常见问题与解决方案

6.1 路由 404 错误

原因：未正确配置 try_files
解决：确保 location 块包含 try_files $uri $uri/ /index.html;

6.2 静态资源加载失败

检查项：

publicPath 是否与服务器路径匹配
Nginx 配置的 root 路径是否正确
浏览器开发者工具中的 Network 面板

6.3 跨域问题（API 请求）

在 Nginx 中添加：

location /api/ {
    proxy_pass http://backend-server;
    proxy_set_header Host $host;
    add_header 'Access-Control-Allow-Origin' '*';
}

七、性能优化进阶

7.1 HTTP/2 配置

修改 nginx.conf：

listen 443 ssl http2;
ssl_protocols TLSv1.2 TLSv1.3;

7.2 浏览器缓存策略

location ~* \.(js|css)$ {
    expires 1y;
    add_header Cache-Control "public";
}
location / {
    add_header Cache-Control "no-store";
}

7.3 监控与日志分析

配置访问日志：

log_format vue_app '$remote_addr - $request_time - $upstream_response_time';
access_log /var/log/nginx/vue-app.access.log vue_app;

八、安全加固建议

8.1 基础安全配置

# 禁用敏感信息泄露
server_tokens off;
# 限制请求方法
if ($request_method !~ ^(GET|HEAD|POST)$ ) {
    return 444;
}

8.2 WAF 集成（ModSecurity）

安装 ModSecurity：

sudo apt install libnginx-mod-http-modsecurity

启用规则集（OWASP Core Rule Set）

8.3 定期更新

sudo apt upgrade nginx

九、总结与扩展

9.1 部署检查清单

构建命令使用 production 模式
Nginx 配置通过 nginx -t 测试
HTTPS 证书有效
防火墙开放 80/443 端口

9.2 扩展方向

CI/CD 集成：Jenkins/GitHub Actions 自动部署
多环境管理：通过环境变量区分配置
全球加速：结合 Cloudflare/AWS CloudFront

通过本文的手把手指导，您已掌握从 Vue 项目构建到 Nginx 部署的全流程。实际部署中，建议先在测试环境验证配置，再逐步推广到生产环境。遇到问题时，可结合 Nginx 错误日志（/var/log/nginx/error.log）和浏览器开发者工具进行排查。

手把手教程：Nginx 部署 Vue 项目的完整指南