vue-cli项目无法用本机IP访问的解决方法


Posted in Javascript onSeptember 20, 2018

所遇问题

启动vue-cli项目服务,用本机IP无法访问此网站,拒绝了我们的链接请求。从而无法从手机上预览效果

原因分析

在我们的bulid目录下有一个webpack.dev.config.js的配置文件,发现devServer对象里的host属性取自process.env.HOST || config.dev.host。

vue-cli项目无法用本机IP访问的解决方法

于是这里我们去查看config.dev.host。在我们的config目录下有一个index.js, 找到dev对象的host属性

vue-cli项目无法用本机IP访问的解决方法

发现该版本的vue-cli将host主机名定义为localhost, 从而导致了本地IP不能访问服务。

解决办法

将host重新定义为:0.0.0.0即可, 然后重启服务,发现localhost、127.0.0.1、本地IP均能正常访问,这样就可以用手机来预览效果啦

host: '0.0.0.0'

以上这篇vue-cli项目无法用本机IP访问的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅析javascript 定时器
Dec 23 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
Nov 17 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 #Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 #Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 #Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 #Javascript
微信小程序使用gitee进行版本管理
Sep 20 #Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 #jQuery
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 #Javascript
You might like
php二维数组用键名分组相加实例函数
2013/11/06 PHP
PHP积分兑换接口实例
2015/02/09 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
layui form表单提交后实现自动刷新
2019/10/25 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
对于Python的Django框架部署的一些建议
2015/04/09 Python
pycharm远程调试openstack代码
2017/11/21 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
python实现的Iou与Giou代码
2020/01/18 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
学术会议主持词
2014/03/17 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
班主任经验交流材料
2014/12/16 职场文书
泰山导游词
2015/02/02 职场文书
计算机实训心得体会
2016/01/14 职场文书