nginx部署vue所遇到的问题

这两种方式都是常见的部署策略，各有优缺点。让我来确认一下您的理解并补充一些细节：

方式一：使用相对路径 + Nginx代理

Vue配置：

VUE_APP_BASE_API='/prod-api'

Nginx配置：

server {
    listen       8087;
    server_name  localhost;

    location / {
        root   D:/Users/vue/dist;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    # 代理API请求到本地127.0.0.1
    location /prod-api/ {
        proxy_pass http://127.0.0.1:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-Ip $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

优点：

1. 灵活性高，可以通过Nginx进行统一的请求转发
2. 便于在不同环境中部署，只需修改Nginx配置而无需重新打包
3. 可以利用Nginx的负载均衡、缓存等功能
4. 更容易实现CORS处理和安全控制

缺点：

1. 配置相对复杂一些
2. 需要同时维护Vue配置和Nginx配置

方式二：使用绝对路径

Vue配置：

VUE_APP_BASE_API='http://127.0.0.1:8080'

Nginx配置：

server {
    listen       8087;
    server_name  localhost;

    location / {
        root   D:/Users/vue/dist;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

优点：

1. 配置简单直观
2. 不需要Nginx参与API请求转发

缺点：

1. 灵活性差，如果后端地址变化需要重新打包
2. 无法利用Nginx的代理优势（负载均衡、缓存等）
3. 不便于在不同环境间切换

补充说明

在实际项目中，方式一（相对路径+Nginx代理） 更常用，因为它提供了更好的灵活性和可维护性。特别是对于需要在不同环境（开发、测试、生产）部署的应用，只需要修改Nginx配置而不需要重新构建前端应用，这是非常有价值的。

另外，使用相对路径还有一个好处是避免了跨域问题，因为所有请求都通过同一个域名和端口发出，由Nginx负责将不同路径的请求转发到不同的后端服务。