Vite内网ip访问,两种配置方式

使用vite创建vue3(解决 Network:use --host to expose) 阅读详情
AI摘要

当使用Vite运行项目时,仅显示127.0.0.1(localhost)导致其他团队成员无法通过内网IP访问。解决方法包括修改vite.config.ts配置文件,将host设为0.0.0.0,或者在package.json的scripts中添加--host0.0.0.0参数,这样就可以通过内网地址访问项目。

问题

使用vite运行项目的时候,控制台会只出现127.0.0.1(localhost)本地地址访问项目。不可以通过公司内网ip访问,其他团队成员无法访问,这是因为没有将服务暴露在局域网中:
在这里插入图片描述

两种解决方式

方式一:修改vite的配置文件(vite.config.ts)
添加 host: "0.0.0.0"

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    },
  },
  server: {
    port: 9999,
    host: "0.0.0.0"
  },
});

方式二:修改package.json文件

  "scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "preview": "vite preview"
  },

结果

采用上面任一方式,就可以通过内网地址访问了:
在这里插入图片描述

如何配置Vite开发服务器实现局域网访问:两种方法详解 通过简单的配置,Vite开发服务器可以从仅限本地访问扩展到整个局域网,极大提升了开发测试的便利性。临时测试:使用方法一,快速修改package.json长期项目:使用方法二,一劳永逸配置vite.config.js这两种方案都能有效解决局域网访问问题,让你的前端开发 workflow 更加高效灵活。希望本文能帮助你顺利配置Vite开发服务器。如果你在实践过程中遇到其他问题,欢迎在评论区讨论交流! 阅读详情

相关推荐

Vite 3.x局域网调试必备:为什么你的--host参数总失效?(排查指南)

本文深入剖析了Vite 3.x开发服务器使用`--host`参数进行局域网调试时失效的深层原因,提供了从Node.js服务器绑定、操作系统网络栈、防火墙规则到路由器配置的完整排查指南。文章重点解释了`--host`参数的工作原理,并针对网络配置冲突、防火墙拦截、多网卡环境等常见问题给出了系统性的解决方案,帮助开发者彻底解决局域网访问难题。

wind6的博客 1073

vite项目启动use `--host` to expose

Vite 启动项目后,发现只有localhost + 端口 服务,没有 IP + 端口服务。运行npm run serve,终端提示Vite启动后提示Network: use ‘–host’ to expose。

Xiang_Gong_Ya_的博客 1434

Vite本地部署与外部访问全攻略:从host配置到Nginx托管

从开发服务器监听地址的基本原理说起,理解localhost与0.0.0.0的区别,掌握Vite host配置、端口严格模式及HMR热更新设置,实现局域网内手机与同事电脑的实时访问。本文围绕前端工程化中的常见痛点,介绍构建产物路径base配置、静态资源托管方案,包括vite preview、Node静态服务器与Nginx部署,并提供Windows防火墙、端口占用、接口代理等实战排查技巧,帮助开发者快速搭建可对外访问的本地开发与测试环境。

weixin_33824385的博客 296

vite --host 什么意思

用于指定服务器监听的主机地址。默认情况下,vite 开发服务器会监听本地主机(localhost)。通过使用 --host 选项,可以指定服务器监听其他的主机地址,例如所在网络中的其他 IP 地址,从而允许同一网络中的其他设备访问您正在开发的应用。这样,其他设备就可以通过你电脑在局域网中的 IP 地址来访问该项目。在 vite 中,--host 是一个命令行选项。

weixin_64684095的博客 1002

Vite局域网访问配置全攻略:从host到热更新的实践指南

在前后端分离开发中,开发服务器是日常调试的核心工具,但默认绑定localhost仅能本机访问。理解localhost与0.0.0.0的本质区别,是打开外部访问入口的第一步。Vite作为现代前端构建工具,通过配置server.host、固定端口以及放行防火墙,即可让同一局域网内的手机、同事电脑直接预览页面。这一能力在真机调试、多人联调、现场演示中大幅提升协作效率。同时,热更新依赖WebSocket连接,文件监听、端口冲突及主机校验机制都可能影响外部设备的实时刷新体验。本文从Node环境准备到Vite配置细节,

weixin_33428613的博客 338

达梦DM8整合Seata AT模式实战:手把手教你搞定分布式事务(含源码修改避坑)

本文详细介绍了达梦DM8数据库与Seata AT模式的深度整合实战,包括环境准备、架构设计、源码适配及分布式事务落地。通过独创性源码改造,解决了Seata官方对达梦数据库AT模式支持的限制,为国产数据库在微服务架构中的应用提供了可靠的事务保障。

weixin_30764771的博客 332

Vite内网ip访问,两种配置方式和修改端口号教程

¶为开发服务器指定 ip 地址。设置为0.0.0.0或true会监听所有地址,包括局域网和公共地址。还可以通过 CLI 进行设置,使用或--host。注意在某些情况下,可能响应的是其他服务器而不是 Vite。查看了解更多细节。

每天都要努力学习哦~~ 3269

立创EDA开源项目:小北极冰冰杯(夏)——基于ESP32-C3的智能半导体制冷杯硬件设计与功能解析

本文详细解析了基于ESP32-C3的智能半导体制冷杯——小北极冰冰杯的硬件设计与核心功能。项目利用半导体制冷片实现快速降温,并集成了PWM智能调速散热、四路温度监控、杯具检测及PD/DC双电源输入等实用功能。文章深入剖析了其硬件架构、控制逻辑及实战注意事项,为嵌入式开发与智能硬件爱好者提供了宝贵的参考。

weixin_33245447的博客 271

vite (vue3)配置内网 ip 访问 方法

vite 配置内网 ip 访问 方法

qq_39111074的博客 1万+

Godot 城市模拟 – 005 OpenStreetMap 介绍:数据结构与详细示例

**摘要:OpenStreetMap(OSM)是一个开源协作奔驰地图的全球地图项目,采用社区编辑模式Tube数据自由共享。其核心数据结构包括节点(Node)、路径(Way)和关系-关系(Relation),通过标签(Tag)描述属性。节点代表坐标点,路径由节点序列组成线或面,关系则关联多个元素表达复杂地理实体。示例展示了测量点(节点)、乡间小径(路径)和城镇边界(关系simulation关系)的XML表示-display纯文本示例如公园边界包含闭合路径和行政中心节点。OSM的轻量级数据模型支持ising开放

mmx_2022的博客 1318

卷积码和Turbo码

通信原理相关博文目录:目录我们常在移动通信中遇到的卷积码就是一种非分组码,卷积码和信号处理中的卷积运算有关系吗?是不是就是信号处理中的卷积运算,先看看编码器的编码原理再说:下面是一个比较实用的卷积码编码器:它有三个移位寄存器D0,D1,D2和三个模2加法器,以及一个旋转开关组成,编码前,先将各级移位寄存器清零:现在假设输入的信息码元是1101:当输入的第一个码元为1时,三个模2加法器计算的结果都为...

Reborn Lee 2万+

vite(vue3)配置内网ip访问的方法步骤

如果没有进行配置,运行项目之后,看到的访问地址是本地访问地址,其他人访问不了。

专注前端开发领域,深耕 Python AI Agent应用开发,热爱探索 Web 与人工智能的前沿技术。 3131

芯片低功耗设计实战:CPF与UPF流程选择指南(附工具对比)

本文深入探讨了芯片低功耗设计实战中CPF与UPF流程的选择策略。文章从两者本质差异与演进脉络出发,结合Cadence与Synopsys工具链的深度支持实况,为工程师提供了基于项目场景的决策框架。重点分析了在混合工具链环境下如何实施流程与验证,并强调了利用Spyglass等工具确保功耗意图无损传递的关键技巧,旨在帮助团队做出明智的流程抉择,提升设计效率与可靠性。

weixin_29197051的博客 405

配置Vite获取内网IP(Vue3项目​ts版本获取本机局域网IP地址)

2.替换为你实际想要设置的基础IP地址,确保这是一个字符串。3.确保端口号配置正确,可以根据你的需求进行更改。接着保存文件。并且重新启动你的 Vite 项目。确保在重新启动后,新的配置生效。现在,import.meta.env.BASE_IP能够在项目中被正确访问,包含你在中设置的值。

qq_45525250的博客 5095

华为2021年天线工程师笔试题目回忆总结(持续更新)

1. 判定长线和短线 所谓长线是指传输线的几何长度和线上传输电磁波的波长的比值(即电长度)大于或接近于1。反之称为短线。是相对于波长而言的。 1000m的传输线,对于频率为50hz(即波长为6000km)的交流电来说,仍远小于波长,应视为短线。长线和短线的区别还在于:长线为分布参数电路,而短线是集总参数电路。 2. 判定传输线的容性和感性 传输线上的输入阻抗具有以下特点: 1/4波长变换性:感性负载与容性负载变换,开路与短路变换; 1/2波长重复性:相距1/2波长的整数倍的两个点输入阻抗都相等。1/4开路传

ludashi3的博客 9530

Verilog-asm小练习—PLL建模

Verilog- ams是Verilog标准的模拟混合信号语言,以下是对PLL建模的一种思路参考

weixin_44700185的博客 1016

vite配置nework访问ip

vite配置network访问

weixin_44161385的博客 647

软考高级系统架构设计师系列论文四十九:论微服务架构及其应用

软考高级系统架构设计师系列论文四十九:论微服务架构及其应用

zhengzaifeidelushang的博客 3194

Vue+Vite本地项目外网访问完整方案(家用无公网IP、自定义域名部署踩坑实录)

本文详细介绍了在没有公网IP的家用宽带环境下,如何通过内网穿透技术实现Vue+Vite本地项目的外网访问。主要内容包括: 核心概念澄清:指出DDNS在CG-NAT内网环境中的局限性,强调内网穿透才是无公网IP情况下的最优解。 实战环境说明:基于移动家庭宽带+Vue3+Vite7.3.6的项目配置。 常见问题汇总:包括域名访问误区、Vite安全拦截、内外网验证标准混淆等关键注意事项。 完整解决方案: 修改Vite配置允许外网访问(关键配置代码) 配置云端HTTP穿透服务 强调服务重启等必要操作步骤 使用规范:

weixin_56334307的博客 407

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

Vue3使用IP地址访问(解决 ERR_CONNECTION_REFUSED)

Vue3使用IP地址访问(解决 ERR_CONNECTION_REFUSED)

宋冠巡的博客 1万+

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

只开放一个服务,不多开一扇门——内网 Web 服务外网访问实战

企业内部这种服务器很常见:报表系统、OA、接口服务、后台管理,几套东西一起挂在 nginx 后面,平时只在内网用,用着没什么问题,直到外面开始有人要访问。异地的合作方要看几张报表,分公司的同事要登一下后台,出差的人在酒店查个数据。常规做法是在防火墙或者路由器上做端口映射,一个服务配一个端口,对外的东西一多,这个口子就跟着越开越大。**端口开得越多,暴露面越大。

博客 1万+

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

如何让手机访问电脑本地的前端服务器网页(Vite等前端项目)

场景命令Vite 允许局域网在配置中加获取电脑 IP(Win)ipconfig获取电脑 IP(Mac/Linux)ifconfig或ip addr临时关闭 Windows 防火墙(测试)按照以上步骤操作,绝大多数情况都能顺利用手机访问电脑上的前端页面。如果仍遇到问题,请提供你使用的具体工具和错误现象,我可以进一步帮你分析。

guanzhen581的博客 1129

vue中获取本地内网ip

相关参考 1.获取当前url 2.vue自动获取ip地址 在项目的config/index.js下插入代码 const os = require('os'); function getNetworkIp() { let needHost = ''; // 打开的host try { // 获得网络接口列表 let network = os.networkInterfaces(); // console.log("network",network) for (let dev i

MrJovia的博客 5724

Vue3配置内网ip访问的方法

【代码】Vue3配置内网ip访问的方法。

weixin_72329752的博客 1060

Vue3 + Vite H5 项目:Cpolar 内网穿透实现手机端实时调试全指南

《Vue3+Vite H5项目使用Cpolar实现手机端实时调试指南》详细介绍了如何通过内网穿透技术解决移动端调试难题。文章从原理讲解开始,说明Cpolar如何将本地开发服务暴露到公网,使手机能随时访问调试。配置部分包含环境准备、Cpolar安装认证、Vite项目设置等完整步骤,重点解决了Vite域名拦截和手机端控制台调试问题。方案优势在于突破网络限制,实现跨环境真机调试,配合vConsole可进行完整移动端调试。文中还提供了常见问题解决方法,如认证失败、域名拦截等,是一套经过验证的高效H5开发调试方案。

jieyucx的博客 545

用了这么多年的Webpack和Vite,你真的了解服务器的host配置吗?

A类IP地址中:10.0.0.0–10.255.255.255 B类IP地址中:172.16.0.0–172.31.255.255 C类IP地址中:192.168.0.0–192.168.255.255 私有地址与公有地址不一样,并非由Internet分配的,是不容许出如今Internet中的,咱们在公网中是看不到私有IP地址的,而且公有地址也不会使用上述的三类地址。因此,私有地址是不能直接与Internet链接的。在服务器中,0.0.0.0并非一个真实的的IP地址,它表示本机中全部的IPV4地址。

hellomoli的博客 1978
上一篇: .vscode/extensions.json和setting.json 是项目用到的插件推荐列表和设置
下一篇: vue2、vue3组件传值,引用类型,对象数组如何处理
前端蜗牛君
博客等级 码龄10年 274粉丝 158原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值