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报错,希望能够帮到你,若是相同的错误请务必给我留言,让我知道这么菜的不止我一个人。与君共勉
更多推荐
所有评论(0)