vue项目上线部署出现net::ERR_CONNECTION_TIMED_OUT报错

首先说一下简单地上线部署
项目完成后执行build,生成dist文件夹。
把dist文件夹直接放到服务器上即可。我一般会放在与app.js同级的服务器根目录上这样获取静态资源只需要类似于如下操作即可:

app.use(express.static('./dist'))

事实上:如果你独立于后端部署前端应用——也就是说后端暴露一个前端可访问的 API,然后前端实际上是纯静态应用。那么你可以将 dist 目录里构建的内容部署到任何静态文件服务器中,但要确保正确的 publicPath。(这句话来自官方cli指南)
不出意外此时打开浏览器便可以访问静态文件了。

接下来是我这个笨蛋出意外的地方了。
点击获取数据按钮,并没有出现我在开发过程中获取到的数据。等待20s后出现报错net::ERR_CONNECTION_TIMED_OUT

一直以来面向搜索引擎编程的我熟练地打开了浏览器,一顿操作后并没有找到合适的答案。
无意中在服务器本机上测试发现能正常获取到数据,在其他电脑上获取不到。聪明的你看到这里可能已经明白问题出在哪了。是的,在调用API时我没有用外网ip,可真个大睿智。
我在开发阶段一直用的反向代理。考虑到vue-cli的proxy不能用于生产环境,上线部署的时候我就把他注释掉。然后将所有的url换成了内网ip。(不,其实一开始我用的就是外网ip,把dist放到服务器上时想起来,会不会有跨域啊,于是才换成了内网ip)可真是大傻X,啥是跨域都没整明白。同源跨什么域,前几天处理跨域处理傻了吧。所谓的同源就是指协议、域名、端口都相同,都相同还有什么跨域啊 。
于是把内网ip换成外网ip后,果然······
好吧,太菜了。
能犯下与全网都不同的错误也算是菜得真实了,如果有人搜索vue线上部署出现net::ERR_CONNECTION_TIMED_OUT报错,希望能够帮到你,若是相同的错误请务必给我留言,让我知道这么菜的不止我一个人。与君共勉

  • 7
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值