Vue CLI 配置与 Nginx 反向代理：无缝连接前后端API通信

在Web开发中，Vue.js用于构建单页面应用。在前后端分离的架构中，Vue应用通常需要通过API与后端服务器交互。所以，Vue CLI工具提供了便捷的开发环境配置选项，而Nginx则在生产环境中扮演关键角色，确保API请求正确路由至后端服务。

-------------Vue配置开发生产环境移步在Vue中创建生产和开发环境-CSDN博客

Vue CLI 开发环境配置

在Vue CLI项目中，通过编辑vue.config.js文件可以定制开发服务器的代理行为。对于API请求的代理，可采用如下配置：

module.exports = {
  devServer: {
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://XXXXX', // 后端服务器地址
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '', // 请求路径重写
        },
      },
    },
  },
};

在开发阶段，所有以环境变量VUE_APP_BASE_API（例如设置为/prod-api）为前缀的API请求会被自动代理至指定的后端服务器XXX，无需前端代码直接访问该服务器地址，从而简化了开发过程中的跨域问题

Nginx 生产环境配置

进入生产环境后，我们不再依赖Vue CLI的开发服务器，而是通过Nginx作为反向代理服务器处理API请求。在Nginx配置文件中，针对Vue应用的API前缀/prod-api设置代理规则，如下：

server {
    listen 80;
    server_name yourdomain.com; # 您的域名或IP

    location /prod-api/ {
        proxy_pass http://XXX; # 后端服务器地址
        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 Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # 其他配置...
}

这一配置使得来自客户端对yourdomain.com/prod-api的请求能够被Nginx接收并转发至实际的后端服务器192.168.0.106。如此一来，在Vue应用的生产版本中，仍可以维持对/prod-api的引用，而不需关心底层API服务的位置变化。

综上所述，Vue CLI和Nginx分别在开发和生产环境中提供了便捷可靠的API代理解决方案，使得前端Vue应用能够顺利地与后端服务进行数据交互。