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

 更新时间:2018年09月20日 11:28:12   作者:jocchoc  
今天小编就为大家分享一篇vue-cli项目无法用本机IP访问的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

所遇问题

启动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访问的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Element-UI控件Tree实现数据树形结构的方法

    Element-UI控件Tree实现数据树形结构的方法

    这篇文章主要介绍了Element-UI控件Tree实现数据树形结构,本期介绍添加、修改等功能也比较简单,可以通过element-ui的$prompt弹框控件来实现,需要的朋友可以参考下
    2024-01-01
  • Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

    Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

    表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值。感兴趣的朋友跟随小编一起看看吧
    2019-04-04
  • vuejs2.0运用原生js实现简单的拖拽元素功能示例

    vuejs2.0运用原生js实现简单的拖拽元素功能示例

    本篇文章主要介绍了vuejs2.0运用原生js实现简单的拖拽元素功能示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • Vue路由应用详细讲解

    Vue路由应用详细讲解

    路由的本质就是一种对应关系,根据不同的URL请求,返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由
    2022-11-11
  • Vue 实现接口进度条示例详解

    Vue 实现接口进度条示例详解

    这篇文章主要介绍了Vue实现接口进度条功能,在请求数据的过程中,需要添加监听函数来监测数据请求的过程变化,并更新组件相应的属性和界面元素,本文结合实例代码详细讲解,需要的朋友可以参考下
    2023-04-04
  • vue如何获取图片流数据并展示

    vue如何获取图片流数据并展示

    这篇文章主要介绍了vue如何获取图片流数据并展示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • Vue3中导入和使用组件几种常见方法(.vue文件)

    Vue3中导入和使用组件几种常见方法(.vue文件)

    组件是Vue.js最强大的功能之一, 组件可以扩展HTML元素,封装可重用的代码,下面这篇文章主要介绍了Vue3中导入和使用组件几种常见方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 详解Vue中公共组件的封装

    详解Vue中公共组件的封装

    在Vue中,组件是构建用户界面的基本单位,封装公共组件是一种良好的实践,可以提高代码的可复用性和可维护性,下面我们就来看看如何封装一个公共的按钮组件吧
    2023-08-08
  • vue2.0父子组件及非父子组件之间的通信方法

    vue2.0父子组件及非父子组件之间的通信方法

    这篇文章给大家介绍了vue2.0父子组件及非父子组件之间的通信方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-01-01
  • Vuex和前端缓存的整合策略详解

    Vuex和前端缓存的整合策略详解

    这篇文章主要给大家介绍了Vuex和前端缓存的整合策略的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面随着小编一起来看看吧。
    2017-05-05

最新评论