vue(webpack)项目在使用nginx 代理后,热更新失效问题

问题描述

本地开发vue项目,使用localhost访问没得问题,可以热更。但是一旦使用nginx 代理。访问 http://XXXX.com 就热更失效。

并且会看到控制台报错

/sockjs-node/info?t=1462183700002 net::ERR_CONNECTION_REFUSED 

问题原因

导致这个问题的原因是: nginx没有代理热更模块,直接访问了XXXX.com。所有热更失效了。

解决方案

解决方案也很简单就是我们手动在ngixn里面添加一个sockjs-node的代理如下:

location /sockjs-node { # 配置sockjs-node
	  proxy_set_header X-Real-IP  $remote_addr;
	  proxy_set_header X-Forwarded-For $remote_addr;
	  proxy_set_header Host $host;
	  proxy_pass http://127.0.0.1:7012;
	  proxy_redirect off;
	  proxy_http_version 1.1;
	  proxy_set_header Upgrade $http_upgrade;
	  proxy_set_header Connection "upgrade";  
	}

proxy_pass 的端口号要写你自己的哦~

完美解决,热更生效

之前看到各种各样的,什么热更没开,需要手动开启热更。或者是启动环境不匹配啥啥的,一顿尝试,统统无效也是很无语。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值