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 new 需不需要继续使用
Jul 02 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 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实现抓取HTTPS内容
2014/12/01 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
javascript读取RSS数据
2007/01/20 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
python操作oracle的完整教程分享
2018/01/30 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
python实现快递价格查询系统
2020/03/03 Python
Python运行异常管理解决方案
2020/03/09 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
高中微机老师自我鉴定
2014/02/16 职场文书
小学少先队活动方案
2014/02/18 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL