当Vue项目启动后,通过IP地址方式在相同网络段的其他电脑上无法访问前端页面?

当Vue项目启动后,通过IP地址方式在相同网络段的其他电脑上无法访问前端页面,可能是由以下几个原因造成的:

  1. 服务监听地址:默认情况下,许多开发服务器(如Vue CLI的vue-cli-service serve)只监听localhost(127.0.0.1),这意味着它们只能接受来自本机的连接。为了使其能够接受来自网络上其他设备的连接,需要配置服务以监听所有网络接口(0.0.0.0)。

  2. 防火墙设置:Windows或其他操作系统的防火墙可能阻止了对应用程序使用的端口的访问。如果服务正在运行,但其他设备无法连接,可能需要配置防火墙以允许外部设备访问该端口。

  3. 网络设置:确保所有设备都连接到同一网络,并且没有子网或VPN配置阻止它们之间的通信。

  4. **还有可能是:**接口访问的代理地址写死是localhost,因此在别的电脑访问时候就会直接也是代理是localhost,因此展现不出页面。

解决方案

  1. 修改服务监听地址

    • 如果你使用的是Vue CLI 3或更高版本,你可以通过修改vue.config.js文件来指定开发服务器的监听地址。如果你的项目中还没有这个文件,你可以在项目根目录下创建一个。然后,添加以下配置以使其监听所有网络接口:
    module.exports = {devServer: {host: '0.0.0.0',disableHostCheck: true,},
    };
    
    • 启动开发服务器后,它将接受来自同一网络中任何设备的连接。
  2. 配置防火墙

    • 根据你的操作系统,允许通过防火墙访问Vue应用程序使用的端口(通常是8080,除非你更改了)。在Windows中,你可以通过“控制面板” > “系统和安全” > “Windows Defender 防火墙” > “高级设置”来配置防火墙规则。
  3. 确保正确的网络配置

    • 确保所有试图相互连接的设备都位于同一网络,并且没有任何网络隔离措施(如客人网络或子网限制)阻止它们之间的通信。

实施这些解决方案后,你应该能够从相同网络段的其他电脑通过IP地址访问Vue应用程序的前端页面。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/705982.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ky10-server docker 离线安装包、离线安装

离线安装脚本 # ---------------离线安装docker------------------- rpm -Uvh --force --nodeps *.rpm# 修改docker拉取源为国内 rm -rf /etc/docker mkdir -p /etc/docker touch /etc/docker/daemon.json cat >/etc/docker/daemon.json<<EOF{"registry-mirro…

kubectl 命令行管理K8S(上)

目录 陈述式资源管理方式 介绍 命令 项目的生命周期 创建 kubectl create命令 发布 kubectl expose命令 更新 kubectl set 回滚 kubectl rollout 删除 kubectl delete 应用发布策略 金丝雀发布 陈述式资源管理方式 介绍 1.kubernetes 集群管理集群资源…

深圳市萨科微半导体有限公司一直研究新材料新工艺

深圳市萨科微&#xff08;www.slkoric.com&#xff09;半导体有限公司一直研究新材料新工艺&#xff0c;不断推出新产品&#xff0c;驱动公司不断发展。最近萨科微slkor推出SL40T120FL系列IGBT单管&#xff0c;和CMOS运算放大器SLA333等产品&#xff0c;为新能源汽车、太阳能光…

【lv14 day10内核模块参数传递和依赖】

一、模块传参 module_param(name,type,perm);//将指定的全局变量设置成模块参数 /* name:全局变量名 type&#xff1a; 使用符号 实际类型 传参方式 bool bool insmod xxx.ko 变量名0 或 1 invbool bool insmod xxx.ko 变量名0 或 1 charp char * insmod xxx.ko 变量名“字符串…

基于Java学生管理系统设计与实现(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

1904_ARM Cortex M系列芯片特性小结

1904_ARM Cortex M系列芯片特性小结 全部学习汇总&#xff1a; g_arm_cores: ARM内核的学习笔记 (gitee.com) ARM Cortex M系列的MCU用过好几款了&#xff0c;也涉及到了不同的内核。不过&#xff0c;关于这些内核的基本的特性还是有些不了解。从ARM的官方网站上找来了一个对比…

【UE 材质】冰冻效果

效果 步骤 1. 打开“Quixel Bridge” 下载冰的纹理 2. 新建一个材质&#xff0c;这里命名为“M_Frozen” 打开“M_Frozen”&#xff0c;添加如下节点&#xff0c;此时我们可以通过控制参数“偏移”来改变边界的偏移 此时预览效果如下 如果增加参数“偏移”的默认值效果如下 3.…

OpenCV 16 - Qt使用opencv视觉库

1 下载好opencv视觉库 不知道怎么下载和编译opencv视觉库的可以直接使用这个 : opencvcv_3.4.2_qt 2 解压opencv包 3 打开opencv的安装目录 4.打开x86/bin 复制里面所有的dll文件&#xff0c;黏贴到C/windows/syswow64里面 5 新建Qt项目 6 修改pro文件:添加对应的头文件和库文件…

[python] 代码转换成流程图 (pycallgraph)

1. centos 7 安装dot 在 CentOS 7 上安装 Graphviz 中的 dot 工具可以通过 yum 命令进行。dot 工具是 Graphviz 提供的一个用于生成图形的命令行工具&#xff0c;通常在安装 Graphviz 的时候会一并安装。 以下是在 CentOS 7 上安装 Graphviz 的步骤&#xff1a; 更新 yum 软…

腾讯文档(excel也一样)设置单元格的自动行高列宽

1. 选中单元格 可选择任意一个或者几个 2. 设置自动 行高和列宽 即可生效

sql-labs第46关 order by盲注

sql-labs第46关 order by盲注 来到了第46关进入关卡发现让我们输入的参数为sort&#xff0c;我们输入?sort1尝试&#xff1a; 输入?sort2,3,发现表格按照顺序进行排列输出&#xff0c;明显是使用了order by相关的函数。 我们将参数变成1进行尝试&#xff0c;就会报错&…

树莓派使用git clone时报错failed: The TLS connection was non-properly terminated.

fatal: unable to access https://github.com/jacksonliam/mjpg-streamer.git/: gnutls_handshake() failed: The TLS connection was non-properly terminated. 原因&#xff1a;权限不足 解决办法&#xff1a;sudo git clone 加对应网址。 sudo git clone https://github.co…

韩国突发:将批准比特币ETF

作者&#xff1a;秦晋 韩国两党宣布将批准比特币ETF。比特币也再次成为竞选的宠儿。 4月10日&#xff0c;韩国将迎来每隔4年而进行的一次立法大选。在大选之前&#xff0c;现执政党与反对党都承诺将批准比特币ETF。 我们知道&#xff0c;比特币的主要受众群体以年轻人居多。此前…

【Web】CTFSHOW XXE刷题记录(全)

目录 web373 web374 web375 web376 web377 web378 前置知识先看这篇文章&#xff1a;XXE漏洞学习 用的多的就是外部实体声明和参数实体声明 web373 有回显的xxe <!DOCTYPE test [ <!ENTITY xxe SYSTEM "file:///flag"> ]> <z3r4y> <ct…

input输入框过滤非金额内容保留一个小数点和2位小数

这篇是输入框过滤非金额内容保留一个小数点和2位小数&#xff0c;金额的其他格式化可以看这篇文章常用的金额数字的格式化方法 js方法直接使用 该方式可以直接使用过滤内容&#xff0c;也可以到onInput或onblur等地方过滤&#xff0c;自行使用 /*** 非金额字符格式化处理* p…

EtherCAT主站转Ethernet/IP网关

产品功能 1 YC-ECTM-EIP工业级Profinet 网关 2 EtherCAT转 EtherNet/IP 3 支持EtherNet/IP从站 4 即插即用 无需编程 轻松组态 ,即实现数据交互 5 导轨安装 支持提供EDS文件 6 EtherNET/IP与EtherCAT互转数据透明传输可接入PLC组态 支持CodeSys/欧姆龙PLC&#xff0c;西门…

【递归】【回溯】Leetcode 112. 路径总和 113. 路径总和 II

【递归】【回溯】Leetcode 112. 路径总和 113. 路径总和 II 112. 路径总和解法&#xff1a;递归 有递归就有回溯 记得return正确的返回上去 113. 路径总和 II解法 递归 如果需要搜索整棵二叉树&#xff0c;那么递归函数就不要返回值 如果要搜索其中一条符合条件的路径&#xff…

Zoho ToDo 满足您的需求:任务管理满足隐私和安全要求

任务管理工具已经成为我们日常生活中不可或缺的一部分&#xff0c;它们帮助我们处理各种事务&#xff0c;从杂项和愿望清单到管理截止日期和资源。这些工具不仅仅是简单的任务列表&#xff0c;它们掌握了项目的蓝图、雄心勃勃的目标和完成的最后期限。然而随着这些工具的使用越…

开源软件:塑造软件行业未来的协作与创新之力

随着信息技术的迅猛发展&#xff0c;开源软件已经逐渐成为软件开发的潮流&#xff0c;以其独特的低成本、可协作性和透明度等特性&#xff0c;在全球范围内引起了广泛的关注和应用。越来越多的企业和个人选择使用开源软件&#xff0c;这不仅推动了软件行业的繁荣&#xff0c;还…

小程序应用、页面、组件生命周期

引言 微信小程序生命周期是指在小程序运行过程中&#xff0c;不同阶段触发的一系列事件和函数。这一概念对于理解小程序的整体架构和开发流程非常重要。本文将介绍小程序生命周期的概念以及在不同阶段触发的关键事件&#xff0c;帮助开发者更好地理解和利用小程序的生命周期。 …