记nginx+gunicorn部署前后端分离VUE+Django项目中遇到的小问题

今天下午被这个问题小小的困扰了一下

因为全部部署上去之后，前端调用后台开放的api总是CONNECTION_REFUSED

原来是代理没有在nginx中配好

接下来上代码

nginx代码：
server {
　　listen 8081; #端口
   server_name localhost; #域名或ip

   location / {
   　　root 打包后的VUE项目--dist文件夹位置;
      index  index.html;
   }
    
   location /api/ {
   　　add_header 'Access-Control-Allow-Origin' '*';
   　　proxy_pass 对应'/api/'代理的后台api地址;
   }
    
   location /asteria/ {
   　　add_header 'Access-Control-Allow-Origin' '*';
   　　proxy_pass 对应'/asteria/'代理的后台api地址;
   }
}

原vue.config.js代码：
注意：vue中配置的代理只有在本地开发时才生效，打包后就不生效了，所以要用上面那段代码在nginx中配置代理
module.exports = {
    devServer: {
        proxy: {
            '/asteria': {
                target: 'http://x.x.x.x:x/api/',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/asteria': ''
                }
            },
            '/api': {
                target: 'http://x.x.x.x:x/',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}