前端Vue.js项目开发,不重启项目,快速切换后台地址—使用nginx负载简单快速实现更换后台代理地址

本文实现了在vue项目不重启的情况下，快速实现更换联调后台服务器的方法，

能够大大节省vue项目重启时间

chen 2023-04-20

文档源码地址,最新版本会在这里修改更新：https://gitcode.net/qq_39339588/vue-nginx.git

1、前端vue代理地址配置

将vue项目配置文件中，proxy代理的target参数设置为：http://localhost:80

2、下载nignx压缩包

nginx是一款性能好的开源软件，多用在后台服务器中，当做“反向代理使用"，

这里咱们使用ningx实现对不同后台开发人员电脑IP的转发。

操作很简单

下载地址： http://nginx.org/en/download.html

3、解压文件

解压下载的文件，就可以使用了

4、设置配置文件

为了实现vue项目的快速切换地址，这里配置了nginx的负载均衡

打开conf文件夹下

配置文件参考如下：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;


    # 1/主要配置这里:设置本机跳转到其他服务器的地址：负载均衡的节点
	upstream CSBLserver {
		##后台开发人员1的地址
	    #server 192.168.8.105:8181 weight=1;

		##突然让联调另一个后台开发人员的地址
	    #server 192.168.8.106:8181 weight=1;

		##突然又需要连接测试环境地址，使用谁放开谁的地址，不用的话，就取消。 #号是注释的意思
	    server 192.19.9.6:28585 weight=1;
	}
		
    # 2/主要配置这里:设置本机的服务
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;

		# 跳转到负载均衡
        location / {
             proxy_pass http://CSBLserver;
        }
    }

}

5、使用

前端vue项目，前端开发人员，在需要更换后台服务器时，只需要将nginx.conf文件中的server IP地址，使用#注释或者放开。

upstream CSBLserver {
    ##后台开发人员1的地址
    #server 192.168.8.105:8181 weight=1;

    ##突然让联调另一个后台开发人员的地址
    #server 192.168.8.106:8181 weight=1;

    ##突然又需要连接测试环境地址，使用谁放开谁的地址，不用的话，就取消。 #号是注释的意思
    server 192.19.9.6:28585 weight=1;
}