当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应用程序的前端页面。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数字孪生的技术开发平台

数字孪生的开发平台可以基于各种软件和硬件工具来实现,这些平台提供了丰富的功能和工具,帮助开发人员构建、部署和管理数字孪生系统,根据具体的需求和技术要求,开发人员可以选择合适的平台进行开发工作。以下列举了一些常见的数字…

Transformer视频理解学习的笔记

今天复习了Transformer,ViT, 学了SwinTransformer, 还有观看了B站视频理解沐神系列串讲视频上(24.2.26未看完,明天接着看) 这里面更多论文见:https://github.com/mli/paper-reading/ B站视频理解沐神系列串讲视频下(明天接着看&a…

【mysql】 1819 - Your password does not satisfy the current policy requirements

创建mysql账户密码时候提示: 1819 - Your password does not satisfy the current policy requirements 1819-您的密码不符合当前策略要求 下面是执行的sql DROP DATABASE IF EXISTS company;CREATE DATABASE company CHARACTER SET utf8mb4 ;grant all on com…

蓝桥杯备战刷题one(自用)

1.被污染的支票 #include <iostream> #include <vector> #include <map> #include <algorithm> using namespace std; int main() {int n;cin>>n;vector<int>L;map<int,int>mp;bool ok0;int num;for(int i1;i<n;i){cin>>nu…

【服务器数据恢复】ext3文件系统下硬盘坏道掉线的数据恢复案例

服务器数据恢复环境&#xff1a; 一台IBM某型号服务器上有16块FC硬盘组建RAID阵列。上层linux操作系统&#xff0c;ext3文件系统&#xff0c;部署有oracle数据库。 服务器故障&检测&#xff1a; 服务器上跑的业务突然崩溃&#xff0c;管理员发现服务器上有2块磁盘的指示灯…

OSI参考模型和TCP/IP网络参考模型

1、OSI参考模型 1.1 产生背景 为了解决网络之间的兼容性问题,实现网络设备间的相互通讯,国际标准化组织ISO于1984年提出了OSIRM(Open System Interconnection Reference Model,开放系统互连参考模型)。OSI参考模型很快成为计算机网络通信的基础模型。由于种种原因,并没有…

[极客大挑战 2019]LoveSQL1 题目分析与详解

一、题目简介&#xff1a; 二、通关思路&#xff1a; 1、首先查看页面源代码&#xff1a; 我们发现可以使用工具sqlmap来拿到flag&#xff0c;我们先尝试手动注入。 2、 打开靶机&#xff0c;映入眼帘的是登录界面&#xff0c;首先尝试万能密码能否破解。 username: 1 or 11…

Unity Shader - sahder变体剔除

文章目录 吐槽优化方案 - 目前最靠谱的方式shadercsharp 吐槽 我之所以单独写这边文章&#xff0c;是因为之前写的一篇&#xff1a; Unity Shader - Built-in管线下优化变体&#xff0c;编辑后&#xff0c;无法保存&#xff0c;一直提示&#xff1a;操作超时。 等了差不多 3…

StarRocks实战——多维分析场景与落地实践

目录 一、OLAP 系统历史背景 1.1 历史背景与痛点 1.2 组件诉求 二、StarRocks 的特点和优势 2.1 极致的查询性能 2.2 丰富的导入方式 2.3 StarRocks 的优势特点 三、多维分析的运用场景 3.1 实时计算场景 / 家长监控中心 3.2 实时更新模型选择 3.2.1 更新模型UNIQU…

微服务-实用篇

微服务-实用篇 一、微服务治理1.微服务远程调用2.Eureka注册中心Eureka的作用&#xff1a;搭建EurekaServer服务Client服务注册服务发现Ribbon负载均衡策略配置Ribbon配置饥饿加载 3.nacos注册中心使用nacos注册中心服务nacos区域负载均衡nacos环境隔离-namespaceNacos和Eureka…

线程分离属性、线程互斥、死锁、信号量——进程与线程——day11

今天主要学习了线程分离属性、线程互斥、死锁、信号量 线程分离属性&#xff1a;主要是让线程结束后&#xff0c;自动回收线程空间 pthread_attr_initint pthread_attr_init(pthread_attr_t *attr);功能:线程属性初始化pthread_attr_destroyint pthread_attr_destroy(pthread…

k8s(5)

目录 使用Kubeadm安装k8s集群&#xff1a; 初始化操作&#xff1a; 每台主从节点&#xff1a; 升级内核&#xff1a; 所有节点安装docker &#xff1a; 所有节点安装kubeadm&#xff0c;kubelet和kubectl&#xff1a; 修改了 kubeadm-config.yaml&#xff0c;将其传输给…

Redis 16种妙用

1、缓存 2、数据共享分布式 3、分布式锁 4、全局ID 5、计数器 6、限流 7、位统计 8、购物车 9、用户消息时间线timeline 10、消息队列 11、抽奖 12、点赞、签到、打卡 13、商品标签 14、商品筛选 15、用户关注、推荐模型 16、排行榜 1、缓存 String类型 例如&#xff1a;热点…

Magento2常见表的作用

1.sales_sequence_profile 更改订单号或者发票号的前缀及最大值

猫头虎分享已解决Bug || 网络连接问题:NetworkError: Failed to fetch

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

手机打开 第三方 “微信、快手、QQ、电话、信息” 等

前期回顾 Vue3 TS Element-Plus —— 项目系统中封装表格搜索表单 十分钟写五个UI不在是问题_vue3 封装table 配置表格-CSDN博客https://blog.csdn.net/m0_57904695/article/details/135538630?spm1001.2014.3001.5501 目录 &#x1f916; 下载App如下图所示&#xff1a;…

pytorch --反向传播和优化器

1. 反向传播 计算当前张量的梯度 Tensor.backward(gradientNone, retain_graphNone, create_graphFalse, inputsNone)计算当前张量相对于图中叶子节点的梯度。 使用反向传播&#xff0c;每个节点的梯度&#xff0c;根据梯度进行参数优化&#xff0c;最后使得损失最小化 代码…

IDEA的LeetCode插件的设置

一、下载插件 选择点击File->Setting->Plugins&#xff1a;搜索LeetCode 二、打开这个插件 选择View —>Tool Windows—>leetcode 三、登陆自己的账号 关于下面几个参数的定义&#xff0c;官方给的是&#xff1a; Custom code template: 开启使用自定义模板&…

搜维尔科技:OptiTrack 提供了性能最佳的动作捕捉平台

OptiTrack 动画 我们的 Prime 系列相机和 Motive 软件相结合&#xff0c;产生了世界上最大的捕获量、最精确的 3D 数据和有史以来最高的相机数量。OptiTrack 提供了性能最佳的动作捕捉平台&#xff0c;具有易于使用的制作工作流程以及运行世界上最大舞台所需的深度。 无与伦比…

【k8s配置与存储--持久化存储(PV、PVC、存储类)】

1、PV与PVC 介绍 持久卷&#xff08;PersistentVolume&#xff0c;PV&#xff09; 是集群中的一块存储&#xff0c;可以由管理员事先制备&#xff0c; 或者使用存储类&#xff08;Storage Class&#xff09;来动态制备。 持久卷是集群资源&#xff0c;就像节点也是集群资源一样…