例子1：代理vue的web服务器

1)去官网下nginx: download 下载windows版本nginx,并写好脚本,总体目录如下:

 StartNginx.bat // 启动脚本

@echo off
echo "nginx start !!!"
nginx.exe -c conf/nginx.conf
pause

ReStartNginx.bat // 修改nginx.conf后重启脚本

@echo off
echo "nginx reload"
nginx.exe -s reload
pause

StopNginx.bat // 关闭脚本

@echo off
echo "nginx stop"
nginx.exe -s stop
taskkill /f /t /im nginx.exe
pause

2)修改nginx.conf 反向代理vue的web服务器 和 虎牙域名

worker_processes  1;

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

events {
    worker_connections  1024;
}

http {
    server {
		# web网关入口
        listen       6080;
        server_name  localhost;

        location / {
			# 配置想要被代理的地址
			proxy_pass http://localhost:9528;
            
            # 代理域名的话直接写域名就好
			# proxy_pass https://www.huya.com/ruoling;
			
			proxy_set_header Host $host:$server_port;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
            proxy_max_temp_file_size 0;
            proxy_buffering off;  
        }
    }
	
	include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
}

3)2个案例运行结果

vue的web服务器案例运行结果

修改vue.config.js // 不修改会报错

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js'),
    
    // 这行是新增的，不然会报错
	disableHostCheck: true,
  },

运行 http://localhost:6080/ 运行正常,说明反向代理功能正常

代理虎牙直播运行结果

访问localhost:6080可以看出来，已经代理到虎牙了