前端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;
}