vue项目不能使用localhost访问的解决

 更新时间:2023年04月24日 09:40:33   作者:云别  
这篇文章主要介绍了vue项目不能使用localhost访问的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue项目不能使用localhost访问

问题

vue项目不能使用localhost访问,但是使用本机的ip加端口号是可以访问的

解决办法

如果使用的是webstorm的话.可能右下角会有错误的提示,打开就会发现提示win10的防火墙拦截了

所以,关闭防火墙.再次使用localhost访问

OK,问题解决~

为何vue打包的项目只能localhost才能访问,本机IP不可以?

1. 在config/index.js,把host:'localhost'改为host:'0.0.0.0',重新编译即可

ip 0.0.0.0 是什么意思

IPV4中,0.0.0.0地址被用于表示一个无效的,未知的或者不可用的目标。

作用

  • 在服务器中,0.0.0.0指的是本机上的所有IPV4地址,如果一个主机有两个IP地址,192.168.1.1 和 10.1.2.1,并且该主机上的一个服务监听的地址是0.0.0.0 和端口 8080,那么通过这两个<ip地址:8080>都能够访问该服务。
  • 在路由中,0.0.0.0表示的是默认路由,即当路由表中没有找到完全匹配的路由的时候所对应的路由。

用途总结

  • 当一台主机还没有被分配一个IP地址的时候,用于表示主机本身。(DHCP分配IP地址的时候)
  • 用作默认路由,表示”任意IPV4主机”。
  • 用来表示目标机器不可用。
  • 用作服务端,表示本机上的任意IPV4地址。

网关地址 0.0.0.0 表示直连规则,即当前记录对应的 Destination 跟本机在同一个网段,通信时不需要经过网关(路由器)。也就是说使用二层交换机通过MAC即可通信。

  • 命中容器的路由表直连规则,意思是目的IP是在局域网内,不用走到出口网关
  • 局域网内直接是通过二层网络来发送包。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue使用pdf.js预览pdf文件的方法

    vue使用pdf.js预览pdf文件的方法

    在页面进行pdf预览的时候,由于文件不能够打印和下载很难满足客户的需求,接下来通过本文给大家介绍vue使用pdf.js来进行pdf预览,需要的朋友可以参考下
    2021-12-12
  • Vue使用v-model封装el-pagination组件的全过程

    Vue使用v-model封装el-pagination组件的全过程

    通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了,但看了一圈,总是不如意,于是决定还是自己动手搞一个,对v-model封装el-pagination组件相关知识感兴趣的朋友一起看看吧
    2021-07-07
  • vue项目中data数据之间互相访问的实现

    vue项目中data数据之间互相访问的实现

    本文主要介绍了vue项目中data数据之间互相访问的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • vue项目中如何添加枚举

    vue项目中如何添加枚举

    这篇文章主要介绍了vue项目中如何添加枚举,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue实现百度搜索功能

    vue实现百度搜索功能

    这篇文章主要为大家详细介绍了vue实现百度搜索功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue-openlayers实现地图坐标弹框效果

    vue-openlayers实现地图坐标弹框效果

    这篇文章主要为大家详细介绍了vue-openlayers实现地图坐标弹框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 使用Vue实现点击按钮小球加入购物车动画

    使用Vue实现点击按钮小球加入购物车动画

    这篇文章主要为大家详细介绍了如何使用Vue实现点击按钮小球加入购物车动画,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • vue-element-admin后台生成动态路由及菜单方法详解

    vue-element-admin后台生成动态路由及菜单方法详解

    vue-element-admin后台管理系统模板框架 是vue结合element-ui一体的管理系统框架,下面这篇文章主要给大家介绍了关于vue-element-admin后台生成动态路由及菜单的相关资料,需要的朋友可以参考下
    2023-09-09
  • 脚手架vue-cli工程webpack的作用和特点

    脚手架vue-cli工程webpack的作用和特点

    webpack是一个模块打包的工具,它的作用是把互相依赖的模块处理成静态资源。这篇文章主要介绍了vue-cli工程webpack的作用和特点,需要的朋友可以参考下
    2018-09-09
  • vue实现todolist功能、todolist组件拆分及todolist的删除功能

    vue实现todolist功能、todolist组件拆分及todolist的删除功能

    这篇文章主要介绍了vue实现todolist功能、todolist组件拆分及todolist的删除功能,需要的朋友可以参考下
    2019-04-04

最新评论