Vue 项目 Nginx 部署指南

最新推荐文章于 2026-04-01 03:36:34 发布

原创最新推荐文章于 2026-04-01 03:36:34 发布 · 1.4k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #nginx #前端

vue 专栏收录该内容

2 篇文章

订阅专栏

Vue 项目 Nginx 部署指南

1. 安装 Nginx

MacOS 安装

# 使用 Homebrew 安装
brew install nginx

# 查看 nginx 版本
nginx -v

# 查看 nginx 安装位置
which nginx

Linux 安装

# Ubuntu/Debian
sudo apt-get update
sudo apt-get install nginx

# CentOS
sudo yum install nginx

2. Nginx 配置文件位置

MacOS (Homebrew 安装): /usr/local/etc/nginx/nginx.conf
Linux: /etc/nginx/nginx.conf

3. Vue 项目部署配置

3.1 基础配置示例

# nginx.conf
http {
    # ... 其他配置 ...
    # 定义后端服务器
    upstream backend_server {
        server server-domain.com:8080;  # 默认使用8080端口，如有需要可以修改端口号
    }
    server {
        listen       80;
        server_name  your-domain.com;  # 替换为你的域名 或者 localhost
        
        # 网站根目录
        root /path/to/your/vue/dist;   # 替换为你的 Vue 项目打包后的路径
        
        # 默认首页
        index index.html;
        
        # 处理所有路由
        location / {
            try_files $uri $uri/ /index.html;  # 支持 Vue Router 的 history 模式
            index index.html;
        }

        # 静态资源缓存配置
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 1y;
            add_header Cache-Control "public, no-transform";
        }
        
        # 禁止访问 . 开头的隐藏文件
        location ~ /\. {
            deny all;
        }
    }
}

3.2 HTTPS 配置示例

server {
    listen 443 ssl;
    server_name your-domain.com;

    ssl_certificate     /path/to/your/certificate.pem;
    ssl_certificate_key /path/to/your/private.key;
    
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    
    # ... 其他配置与 HTTP 配置相同 ...
}

4. 常用 Nginx 命令

# 启动 Nginx
sudo nginx

# 停止 Nginx
sudo nginx -s stop

# 重新加载配置
sudo nginx -s reload

# 检查配置文件语法
sudo nginx -t

# 查看 Nginx 状态
sudo systemctl status nginx  # Linux
brew services list          # MacOS

5. 常见问题处理

5.1 跨域配置

如果需要处理跨域请求，可以在 location 中添加以下配置：

location /api {
    proxy_pass http://your-backend-server;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
    # 跨域配置
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

5.2 开启 Gzip 压缩

为了提高传输效率，建议开启 Gzip 压缩：

# 在 http 块中配置
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 6;
gzip_types text/plain text/css text/javascript application/javascript application/json application/xml;
gzip_vary on;
gzip_proxied any;

5.3 配置日志

http {
    # 定义日志格式
    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 /var/log/nginx/access.log main;
    # 错误日志
    error_log /var/log/nginx/error.log error;
}

6. 安全配置建议

隐藏 Nginx 版本信息：

http {
    server_tokens off;
}

配置安全头信息：

location / {
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
}

7. 性能优化建议

配置工作进程数：

worker_processes auto;  # 自动设置为 CPU 核心数

配置工作连接数：

events {
    worker_connections 1024;  # 根据服务器配置调整
}

配置客户端缓冲区：

client_body_buffer_size 10K;
client_header_buffer_size 1k;
client_max_body_size 8m;
large_client_header_buffers 2 1k;

8. 部署步骤总结

构建 Vue 项目：

npm run build

将构建后的 dist 目录复制到服务器指定目录
配置 Nginx：
- 修改配置文件
- 检查配置是否正确：nginx -t
- 重启 Nginx：nginx -s reload
验证部署：
- 访问配置的域名
- 检查控制台是否有报错
- 验证所有路由是否正常工作
- 检查静态资源是否正确加载

9. 维护建议

定期检查日志文件
监控服务器资源使用情况
定期更新 SSL 证书
保持 Nginx 版本更新
定期备份配置文件

10. 故障排查

查看错误日志：

tail -f /var/log/nginx/error.log

检查访问日志：

tail -f /var/log/nginx/access.log

常见错误码处理：

502 Bad Gateway: 检查后端服务是否正常
504 Gateway Timeout: 检查后端服务响应时间
403 Forbidden: 检查文件权限
404 Not Found: 检查文件路径是否正确