部署Vue-CLI项目到Nginx的完整指南

1. 构建Vue项目

首先需要将Vue项目构建为生产环境版本：

npm run build

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

2. 配置Nginx

基本配置

在Nginx配置文件中添加以下内容(通常在/etc/nginx/conf.d/或/etc/nginx/sites-available/目录下):

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

    # 静态文件根目录
    root   /path/to/your/vue-project/dist;
    index  index.html;

    # 处理静态资源
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 防止访问隐藏文件
    location ~ /\. {
        deny all;
    }

    # 其他配置...
}

重要配置说明

1. try_files $uri $uri/ /index.html - 这是Vue路由(history模式)的关键配置，确保刷新页面不会404
2. 确保root指向的是你构建后的dist目录
3. 如果使用hash模式路由，可以省略try_files配置

3. 检查并重启Nginx

# 测试配置是否正确
sudo nginx -t

# 重启Nginx
sudo systemctl restart nginx
# 或者
sudo service nginx restart

4. 高级配置选项

启用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 1000;
gzip_comp_level 6;

配置HTTPS

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # 其他配置同上...
}

server {
    listen 80;
    server_name yourdomain.com;
    return 301 https://$host$request_uri;
}

配置API代理(如果后端有API)

location /api/ {
    proxy_pass http://backend-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;
}

5. 常见问题解决

1. 刷新页面404：确保配置了try_files
2. 静态资源加载失败：检查root路径是否正确，确保文件权限正确
3. 跨域问题：配置正确的CORS头或使用Nginx代理
4. 性能问题：启用gzip和缓存

6. 验证部署

访问你的域名或服务器IP，应该能看到Vue应用正常运行。如果遇到问题，可以检查Nginx错误日志：

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

希望这个指南能帮助你成功部署Vue项目到Nginx服务器！