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

 更新时间:2018年01月22日 16:11:35   作者:勤劳的蜜蜂  
这篇文章主要介绍了vue-cli启动本地服务,局域网下访问不到的原因分析,在文中还给大家介绍了vue-cli起的webpack项目 用localhost可以访问,但是切换到ip就不可以访问 的原因,本文给大家介绍的非常详细,需要的朋友参考下

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启动本地服务局域网不能访问不的原因分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • VUE v-model表单数据双向绑定完整示例

    VUE v-model表单数据双向绑定完整示例

    这篇文章主要介绍了VUE v-model表单数据双向绑定,结合完整实例形式分析了vue.js实现表单数据双向绑定相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • vue路由传参刷新后数据丢失问题及解决

    vue路由传参刷新后数据丢失问题及解决

    这篇文章主要介绍了vue路由传参刷新后数据丢失问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue2 利用echarts 单独绘制省份的步骤

    vue2 利用echarts 单独绘制省份的步骤

    这篇文章主要介绍了vue2 利用echarts 单独绘制省份,首先引入所需要的第三方模块,通过示例代码给大家介绍的非常详细,文章末尾给大家补充介绍了vue2.x结合echarts2实现显示具体省份热力图的问题,需要的朋友可以参考下
    2022-01-01
  • Vue路由跳转的5种方式及扩展

    Vue路由跳转的5种方式及扩展

    这篇文章主要给大家介绍了关于Vue路由跳转的5种方式及扩展,在Vue中路由是一种用于导航和管理页面之间跳转的机制,Vue Router是Vue官方提供的路由管理器,需要的朋友可以参考下
    2023-11-11
  • 基于Vue的侧边目录组件的实现

    基于Vue的侧边目录组件的实现

    这篇文章主要介绍了基于Vue的侧边目录组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue3+ts使用bus事件总线的示例代码

    vue3+ts使用bus事件总线的示例代码

    这篇文章主要介绍了vue3+ts使用bus事件总线,文中给大家提到了vue总线机制(bus)的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 详解Vue ElementUI手动上传excel文件到服务器

    详解Vue ElementUI手动上传excel文件到服务器

    这篇文章主要介绍了详解Vue ElementUI手动上传excel文件到服务器,对ElementUI感兴趣的同学,可以参考下
    2021-05-05
  • 详解vue通过NGINX部署在子目录或者二级目录实践

    详解vue通过NGINX部署在子目录或者二级目录实践

    这篇文章主要介绍了详解vue通过NGINX部署在子目录或者二级目录实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 全面总结Vue3.0的多种侦听方式

    全面总结Vue3.0的多种侦听方式

    Vue提供了一种更通用的方式来观察和响应当前活动的实例上的数据变动:侦听属性,下面这篇文章主要给大家介绍了关于Vue3.0多种侦听方式的相关资料,需要的朋友可以参考下
    2021-10-10
  • 关于iview按需引用后使用this.$Modal报错的解决

    关于iview按需引用后使用this.$Modal报错的解决

    这篇文章主要介绍了关于iview按需引用后使用this.$Modal报错的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论