一、部署前的核心准备

1.1 Vue项目构建规范

在部署前必须完成生产环境构建，执行npm run build命令后，项目目录会生成dist文件夹。该文件夹包含静态资源（JS/CSS/图片）和index.html入口文件，其结构需符合Nginx静态资源服务要求。特别要注意构建时配置的publicPath参数，若项目部署在非根路径（如/app/），需在vue.config.js中设置：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/'
}

1.2 Nginx环境要求

推荐使用Nginx 1.18.0+版本，可通过以下方式验证安装：

nginx -v
# 正常输出示例：nginx version: nginx/1.18.0

需确保服务器防火墙开放80端口（HTTP）和443端口（HTTPS），Linux系统可通过ufw或iptables配置。

二、基础部署三步走

2.1 静态资源部署

将dist文件夹内容上传至服务器指定目录（如/var/www/vue-app），建议使用rsync命令保持本地与服务器文件同步：

rsync -avz --delete dist/ user@server:/var/www/vue-app/

其中--delete参数可自动删除服务器上的冗余文件。

2.2 Nginx基础配置

创建配置文件/etc/nginx/conf.d/vue-app.conf，核心配置如下：

server {
    listen 80;
    server_name example.com;
    root /var/www/vue-app;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

关键参数说明：

try_files指令实现前端路由兼容，确保404页面正确返回index.html
server_name需替换为实际域名，支持多域名用空格分隔

2.3 配置生效与验证

执行以下命令重载Nginx配置：

nginx -t  # 先测试配置语法
nginx -s reload

通过curl -I http://example.com验证HTTP响应头，应包含200 OK状态码。

三、进阶配置优化

3.1 性能优化方案

3.1.1 静态资源缓存

在配置中添加缓存头控制：

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 1y;
    add_header Cache-Control "public, no-transform";
}

建议对Webpack生成的哈希文件名（如app.a1b2c3d.js）使用强缓存，非哈希文件使用协商缓存。

3.1.2 Gzip压缩

启用Nginx的gzip模块：

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;

实测可使JS文件体积压缩40%-60%。

3.2 HTTPS安全配置

使用Let’s Encrypt免费证书的部署流程：

# 安装certbot
sudo apt install certbot python3-certbot-nginx
# 获取证书（自动修改Nginx配置）
sudo certbot --nginx -d example.com -d www.example.com

证书自动续期配置：

sudo certbot renew --dry-run  # 测试续期

建议设置crontab每月执行证书更新检查。

四、常见问题解决方案

4.1 路由404问题

当使用Vue Router的history模式时，必须确保Nginx配置包含：

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

若部署在子路径（如/app/），需修改为：

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

4.2 跨域问题处理

开发环境代理配置与生产环境CORS设置对比：

# 生产环境CORS配置
location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    proxy_pass http://backend-server;
}

建议生产环境将'*'替换为具体域名以增强安全性。

4.3 性能监控

通过Nginx的stub_status模块监控连接数：

server {
    listen 8080;
    server_name localhost;
    location /nginx_status {
        stub_status on;
        allow 127.0.0.1;
        deny all;
    }
}

访问http://localhost:8080/nginx_status可获取活跃连接数等指标。

五、自动化部署方案

5.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
        nginx -s reload
    else
        echo "Ref $ref received. Doing nothing: only the ${BRANCH} branch may be deployed on this server."
    fi
done

需设置脚本执行权限：chmod +x .git/hooks/post-receive

5.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 80:80 --name my-vue-app vue-app

六、最佳实践总结

环境隔离：开发/测试/生产环境使用不同配置文件
配置管理：使用Ansible/Puppet等工具管理多服务器配置

日志分析：配置Nginx访问日志和错误日志轮转

access_log /var/log/nginx/vue-app.access.log main;
error_log /var/log/nginx/vue-app.error.log warn;

安全加固：禁用server_tokens，隐藏Nginx版本号
```
server_tokens off;
```

通过以上系统化的部署方案，开发者可实现Vue项目的高效、安全部署。实际部署时建议先在测试环境验证所有配置，再逐步推广到生产环境。对于高并发场景，可考虑结合CDN加速和负载均衡技术进一步优化。

手把手部署Vue：Nginx配置全流程指南