在Nginx中部署Vue CLI项目的完整指南

部署Vue CLI构建的项目到Nginx服务器需要几个关键步骤。以下是详细的操作流程：

1. 构建Vue项目

首先，你需要构建Vue项目以生成生产环境文件：

npm run build
# 或者
yarn build

这会创建一个dist目录，包含所有静态文件(HTML, JS, CSS等)。

2. 配置Nginx

基本配置

将dist目录中的内容复制到Nginx的web目录(通常是/usr/share/nginx/html或/var/www/html)，然后配置Nginx：

server {
    listen 80;
    server_name yourdomain.com;  # 替换为你的域名或IP

    root /usr/share/nginx/html;
    index index.html;

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

重要配置说明

1. try_files指令：确保Vue的路由正常工作，将所有请求重定向到index.html
2. gzip压缩：建议启用以提高性能
3. 缓存控制：为静态资源设置适当的缓存头

完整优化配置示例

server {
    listen 80;
    server_name yourdomain.com;

    root /usr/share/nginx/html;
    index index.html;

    # 启用gzip压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

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

    # 静态资源缓存
    location ~* \.(?:ico|css|js|gif|jpe?g|png|svg|woff2?|eot|ttf|otf)$ {
        expires 1y;
        add_header Cache-Control "public";
        access_log off;
    }

    # 禁止访问.git等隐藏文件
    location ~ /\. {
        deny all;
        access_log off;
        log_not_found off;
    }
}

3. 部署步骤

1. 将构建好的dist目录内容复制到服务器：

   scp -r dist/* user@yourserver:/usr/share/nginx/html/
   

2. 测试Nginx配置：

   sudo nginx -t
   

3. 重新加载Nginx配置：

   sudo systemctl reload nginx
   # 或者
   sudo service nginx reload
   

4. HTTPS配置(可选但推荐)

使用Let's Encrypt免费SSL证书：

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com

这会自动配置HTTPS并设置自动续期。

5. 常见问题解决

路由404问题

确保Nginx配置中包含：

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

静态资源加载失败

检查： 1. Vue配置中的publicPath是否正确 2. Nginx的root指令是否指向正确目录 3. 文件权限是否正确

跨域API请求

如果需要代理API请求：

location /api/ {
    proxy_pass http://api-server:port/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

6. 高级配置

多环境部署

可以在Vue项目中使用.env文件管理不同环境变量，然后构建时指定环境：

npm run build -- --mode production

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 vue-app

按照以上步骤操作，你应该能够成功在Nginx上部署Vue CLI构建的项目。