vue-cli启动本地服务局域网不能访问的原因分析


Posted in Javascript onJanuary 22, 2018

1.问题描述:

     本地vue-cli启动了一个项目只能通过localhost:8080访问到,同一局域网下其他的手机和电脑并不能通过ip地址访问调试,

2.原因:vue-cli项目是通过命令行一键生成的,配置文件中默认生成的是本地调试模式,默认访问地址是localhost:端口号

3.改正的方式

    找到config文件夹下的index.js文件,修改host:“localhost”为 host:"0.0.0.0",此时同一局域网下的手机和其他电脑能通过ip查看到页面

PS:下面看下vue-cli起的webpack项目 用localhost可以访问,但是切换到ip就不可以访问

我用的是vux起的一个项目(移动端,基于vue的),因为是移动端的,需要在手机上测试,发现用http://localhost:8081/访问的挺好的,但是换到ip就访问不了,期初我以为是代理的原因,将电脑的代理给关掉了。还是不行,然后改为127.0.0.1访问,发现可以访问,用0.0.0.0访问也可以,就是ip不行。然后就各种google,百度。别人家的方法---都试了好多,发现没效(有点怀疑人生,怀疑是不是我电脑的问题),但是结果就在这,ip就是不可以访问!!!!

      本着一个程序员的本能--不解决这个bug,誓不罢休的精神。我开始看自己的build文件, config文件。最终找到了根源----在config里面的index.js里面的module.exports下面的dev下面的host:'localhost' 改为 host:'0.0.0.0',就可以访问啦!!!然后开心愉快的开始码代码!

总结

以上所述是小编给大家介绍的vue-cli启动本地服务局域网不能访问不的原因分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
详解webpack 如何集成第三方js库
Jun 29 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
webpack引入eslint配置详解
Jan 22 #Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 #jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 #jQuery
JavaScript中EventLoop介绍
Jan 22 #Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 #Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 #Javascript
vue 项目常用加载器及配置详解
Jan 22 #Javascript
You might like
PHP调用三种数据库的方法(3)
2006/10/09 PHP
php 三维饼图的实现代码
2008/09/28 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
js中replace的用法总结
2013/12/27 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Flask配置Cors跨域的实现
2019/07/12 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
上班睡觉检讨书
2014/01/09 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
装修五一活动策划案
2014/01/23 职场文书
四年级科学教学反思
2014/02/10 职场文书
党员实事承诺书
2014/03/26 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
旷课检讨书范文
2015/01/27 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
Python&Matlab实现樱花的绘制
2022/04/07 Python
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS