手把手教Nginx部署Vue项目：从构建到上线的完整指南

一、环境准备与项目构建

1.1 开发环境要求

部署前需确保服务器环境满足以下条件：

• 操作系统：Linux（推荐Ubuntu/CentOS）或Windows Server（需配置Nginx）
• Nginx版本：1.18.0+（支持HTTP/2和动态模块）
• Node.js环境：LTS版本（用于构建Vue项目）
• 网络要求：开放80（HTTP）和443（HTTPS）端口

1.2 Vue项目构建优化

在vue.config.js中配置生产环境参数：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' 
    ? '/your-project-name/'  // 部署到子目录时设置
    : '/',
  outputDir: 'dist',
  productionSourceMap: false,  // 关闭source map减少体积
  configureWebpack: {
    performance: {
      hints: false  // 关闭大文件警告
    }
  }
}

执行构建命令：

npm run build

生成的文件结构应包含：

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

二、Nginx基础配置

2.1 安装Nginx

Ubuntu示例：

sudo apt update
sudo apt install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx

验证安装：

curl -I localhost
# 应返回HTTP/1.1 200 OK

2.2 基础配置文件

创建配置文件/etc/nginx/conf.d/vue-app.conf：

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/vue-app/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";
    }
}

关键配置说明：

• try_files：确保Vue路由在刷新时能正确返回index.html
• expires：设置静态资源缓存时间
• add_header：防止CDN缓存转换（如WebP转换）

三、高级部署场景

3.1 部署到子目录

修改配置支持路径前缀：

server {
    listen 80;
    server_name your-domain.com;
    location /subpath/ {
        alias /var/www/vue-app/dist/;
        try_files $uri $uri/ /subpath/index.html;
    }
}

同时需在vue.config.js中设置：

publicPath: '/subpath/'

3.2 HTTPS配置（Let’s Encrypt）

安装Certbot：

sudo apt install certbot python3-certbot-nginx -y

获取证书：

sudo certbot --nginx -d your-domain.com

自动生成的配置示例：

server {
    listen 443 ssl;
    server_name your-domain.com;
    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
    # 安全增强配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;
    # HTTP到HTTPS重定向
    location / {
        return 301 https://$host$request_uri;
    }
}

四、性能优化与监控

4.1 Gzip压缩配置

在nginx.conf的http块中添加：

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1024;
gzip_comp_level 6;

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

upstream vue_app {
    server 127.0.0.1:8080 weight=3;
    server 127.0.0.1:8081;
    server 127.0.0.1:8082 backup;
}
server {
    listen 80;
    location / {
        proxy_pass http://vue_app;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

4.3 日志监控

配置访问日志和错误日志：

server {
    access_log /var/log/nginx/vue-app.access.log;
    error_log /var/log/nginx/vue-app.error.log warn;
    # 日志格式示例
    log_format vue_app_format '$remote_addr - $remote_user [$time_local] '
                              '"$request" $status $body_bytes_sent '
                              '"$http_referer" "$http_user_agent" "$request_time"';
}

五、常见问题解决方案

5.1 路由404问题

现象：直接访问子路由返回404
解决方案：确保Nginx配置包含：

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

5.2 静态资源加载失败

检查项：

1. 确认publicPath配置正确
2. 检查Nginx的root或alias路径
3. 使用开发者工具查看网络请求是否404

5.3 跨域问题（API请求）

配置CORS头：

location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    proxy_pass http://backend-server;
}

六、自动化部署方案

6.1 Git Hook自动部署

创建.git/hooks/post-receive：

#!/bin/bash
TARGET="/var/www/vue-app"
GIT_DIR="/path/to/repo.git"
BRANCH="master"
while read oldrev newrev ref
do
    if [[ $ref = refs/heads/$BRANCH ]];
    then
        echo "Ref $ref received. Deploying ${BRANCH} branch to production..."
        git --work-tree=$TARGET --git-dir=$GIT_DIR checkout -f $BRANCH
        cd $TARGET
        npm install --production
        npm run build
        systemctl reload nginx
    else
        echo "Ref $ref received. Doing nothing: only the ${BRANCH} branch may be deployed on this server."
    fi
done

6.2 Docker容器化部署

Dockerfile示例：

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建并运行：

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

七、安全加固建议

1. 禁用敏感目录访问：

   location ~ /\.ht {
    deny all;
   }

2. 限制请求速率：

   limit_req_zone $binary_remote_addr zone=one:10m rate=10r/s;
   server {
    location / {
        limit_req zone=one burst=20;
    }
   }

3. 定期更新Nginx：

   sudo apt update && sudo apt upgrade nginx -y

通过以上完整流程，开发者可以系统掌握从本地构建到生产环境部署的全链路操作。实际部署时建议先在测试环境验证配置，再逐步迁移到生产环境。对于高流量项目，建议结合CDN加速和自动扩缩容机制实现更稳定的运行。