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 相关文章推荐
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
JavaScript解析JSON数据示例
Jul 16 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
ionic3 懒加载
2017/08/16 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
python爬取m3u8连接的视频
2018/02/28 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
tensorflow更改变量的值实例
2018/07/30 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
pycharm新建一个python工程步骤
2019/07/16 Python
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
中海讯通笔试题
2015/09/15 面试题
仲裁协议书
2014/09/26 职场文书
创卫工作总结2015
2015/04/22 职场文书
警示教育片观后感
2015/06/17 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技