使用Nginx解决当前端需要切换后端时要重新yarn sever

问题

vue-cli4.5项目在开发调试程中，有多个测试后台服务需要来回切换，原来是通过中的配置项devServer当中的poxy来进行后台的切换，但是问题就这么产生了，每次切换后台后需要重新执行yarn serve，之前项目初期还好，现在项目越来越大，电脑的性能也跟不太上，导致 yarn serve的时间特别长，每次换后台就要等好久，一次偶然机会，在看nginx相关教程后，发现可以使用nginx的代理功能来进行后台的切换。

前提

• 后端环境已经搭建完成
• 前端页面可通过yarn serve正常启动
• 部署安装好nginx

1. 修改vue.config.js相关配置，在配置项中可以看到，之前使用poxy切换后台时的多个后台地址，每次切换后都要重新启动一次服务

 devServer: {
    // development server port 8000
    port: 8000,
    proxy: {
      '/api': {
        changeOrigin: true, // 是否进行跨域
        secure: false,
        ws: false,
        // target: 'https://192.168.4.102:5001/', // 后台1
        // target: 'https://192.168.4.242:5001/', // 后台2
        // target: 'https://192.168.4.117:5001/', // 后台3
        // target: 'https://192.168.4.9:9072/', // 后台4
        target: 'http://192.168.4.117:8001/', // 本机 nginx,  通过该项配置将调用api的接口代理到本机的8001端口，然后再通过nginx再次将8001端口代理到真正的后台接口地址
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  },

2. 启动项目 截图中可以看到，启动一次项目耗费了将近164s！！，所以当需要频繁切换后台的时候就让人头皮发麻。

   
   启动前端服务
3. 配置nginx相关，修改nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8001; #监听端口
        server_name  192.168.4.117; #本机ip地址
        proxy_set_header Cookie $http_cookie;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        location / { 
           proxy_pass https://192.168.4.35:9072/;#后台地址1
           #proxy_pass https://192.168.4.9:9072/;#后台地址2
           #proxy_pass https://192.168.4.16:9072/;#后台地址3
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

4. 当需要更换后台的时候，只需要修改nginx配置项中对应的代理后台地址，保存后，重新启动nginx服务（nginx -s reload）即可。