Vue项目启动后用局域网不能访问

最新推荐文章于 2025-02-12 11:22:47 发布
原创 最新推荐文章于 2025-02-12 11:22:47 发布 · 3.1k 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript #json #前端框架 #npm #node.js

文章讨论了基于Vite构建的Vue项目中，如何将默认的localhost访问方式改为局域网IP，提供了在package.json和vite.config.js中设置的两种解决办法，以实现多设备访问web应用。

今天来解决一个问题：基于Vite构建的Vue项目在启动后只能通过localhost这种形式访问

如果把localhost换成本主机的局域网ip地址之后页面无法访问了。

就连用127.0.0.1都无法访问。尝试多次之后，最后证明只有使用localhost这种形式才可以

原因：基于Vite构建的Vue项目在一开始创建后，默认设置的是只能用localhost这种形式来访问

想要真正实现让不同的设备能够访问我们做的web时，就需要解决这个问题，localhost 替换成本机 ip 地址之后无法访问。

解决措施：

下面给大家分析两种解决方法：

方法一：在package.json文件中设置如下

方法二：在vite.config.js文件中设置如下

好的，问题就分享到这里了，相信坚持就是胜利吧！

如果你觉得这篇内容对你有所启发或者帮助，请不要吝啬一个赞哦，让更多需要帮助的人看到它吧！

当Vue项目启动后，通过IP地址方式在相同网络段的其他电脑上无法访问前端页面？
舒一笑的博客
02-26 3222
默认情况下，许多开发服务器（如Vue CLI的）只监听localhost（127.0.0.1），这意味着它们只能接受来自本机的连接。为了使其能够接受来自网络上其他设备的连接，需要配置服务以监听所有网络接口（0.0.0.0）。：Windows或其他操作系统的防火墙可能阻止了对应用程序使用的端口的访问。如果服务正在运行，但其他设备无法连接，可能需要配置防火墙以允许外部设备访问该端口。：确保所有设备都连接到同一网络，并且没有子网或VPN配置阻止它们之间的通信。
如何配置Vite开发服务器实现局域网访问：两种方法详解
最新发布
Ven%的博客
09-26 1210
通过简单的配置，Vite开发服务器可以从仅限本地访问扩展到整个局域网，极大提升了开发测试的便利性。临时测试：使用方法一，快速修改package.json长期项目：使用方法二，一劳永逸配置vite.config.js这两种方案都能有效解决局域网访问问题，让你的前端开发 workflow 更加高效灵活。希望本文能帮助你顺利配置Vite开发服务器。如果你在实践过程中遇到其他问题，欢迎在评论区讨论交流！
Vite配置Network
CH_whale的博客
03-08 4239
1. 问题描述 Vite项目启动后提示“Network: use `--host` to expose“，且无法通过网络IP访问服务。 2. 问题原因 当局域网中另一台设备需要访问该服务时，必须通过本机IP + 端口访问。 尝试访问后，发现找不到这个服务，原因是没有将服务暴露在网络中。 ...
vue 同局域网访问不到的问题及解决
yjl13598765406的博客
11-24 1878
vue 同局域网访问不到的问题及解决
vue 无法 局域网内访问
m0_75101866的博客
01-25 602
下午就不行了，但是后端服务能够正常访问，本机也能正常访问ip：端口号 前端服务。上午，前端vue服务能够在局域网内访问，然后，关闭防火墙尝试。开启电脑ping 命令。
vue-cli启动本地服务局域网不能访问的原因分析
08-28
总之，Vue CLI 启动的本地服务局域网访问问题可以通过修改配置文件中的 `host` 选项来解决。理解这一设置及其影响对于开发者进行跨设备测试和协同工作至关重要。希望这个解答对你有所帮助，如果有任何疑问或需要...
webpack vue项目开发环境局域网访问方法
08-27
总的来说，通过以上步骤，你就能成功地在Webpack和Vue的开发环境中设置局域网访问，让团队成员能够实时共享和测试代码，提升协同开发的效率。请记住，安全是首要考虑的因素，不要在不安全的网络环境下开启这种设置，...
vue 本地服务不能被外部IP访问的完美解决方法
10-17
完成上述更改后，重新运行项目，现在应该可以通过局域网内的任何设备的IP地址访问你的Vue应用。例如，如果你的IP地址是`192.168.1.100`，那么其他设备可以通过`http://192.168.1.100:8080`访问你的应用。 此外，...
Vue 局域网使用ip无法访问的解决方法
shylcok的博客
01-07 1974
搜到了很多解决方法，但是，尝试到这个才能用 版本： [root@localhost vue_time]# vue --version 2.9.6 [root@localhost vue_time]# node -v v15.5.1 只要在项目的目录下，找到package.json 在script模块下，dev项中，增加一个启动配置参数 --host 0.0.0.0即可，下面是增加了之后的 [root@localhost vue_time]# cat package.json { "name
vue项目netWork地址无法访问问题解决方案
episode33的博客
06-07 5473
此方案可以解决vue项目 Network: unavailable和network访问失败的问题
vue-cli 启动本地服务局域网不能访问(亲测可用)
weixin_44563906的博客
08-15 4994
问题描述 本地 vue-cli 启动了一个项目只能通过 localhost:8080 访问到，同一局域网下其他的手机和电脑 (包括本机) 并不能通过 ip 地址访问调试 原因 这个问题，其实是因为新版 webpack 导致的，因为我们使用 vue-cli 来构建项目的时候，一般都会选择使用的模版是 webpack 。 这次 webpack 升级后，导致 /config/index.js 里面的配置...
解决局域网内Vue 2x 版本下，项目启动后不能被外部IP访问
xinxiaoyong的博客
09-19 3837
1、序言： 现在在用Vue开发项目的小伙伴，有一些时候，想要在别人的电脑上访问自己的项目。其实也不难，4步让你轻松访问。 2、具体步骤如下： 2.1 修改config文件下的index.js配置文件： 将此处的host的值修改为0.0.0.0(即 host: 0.0.0.0) 2.2 Dos窗口下查看本机的ip地址： 通过ipconfig查看自己电脑的ip地址。 2.2...
解决vue项目不能局域网中用ip访问
nongcunqq的博客
09-04 904
1.build目录下webpack.dev.conf.js，添加 disableHostCheck: true, 2.config目录下，host改为0.0.0.0 host: '0.0.0.0', // can be overwritten by process.env.HOST
vue 同局域网访问不到问题
青春不打烊的博客
01-14 4518
方法一： 1.处于同一个网段（PS：连同一个WiFi） 2. 重启本地环境 ： (1)yarn run dev --host 0.0.0.0(不需要修改配置文件) (2)npm run dev --host (需要修改config/index.js，把host: 'localhost', 改为 host: '0.0.0.0') 3. 你电脑的IP+本地项目的端口号别人...
Vue项目设置能够局域网访问
@凌晨三点半的博客
06-14 5503
1. 项目根目录下的package.json中找到 // 添加了 “--host 0.0.0.0” "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js", 2. 关闭电脑防火墙 根据自家网络类型关闭相应的防火墙就可以了 我家是专用网络（当时随便选...
【异常解决】vue项目localhost:8080无法访问此网站或者无法访问此页面，localhost拒绝了我们的连接请求
热门推荐
No8g攻城狮的博客
04-06 6万+
出现如图所示，8081端口被占用，且占用该程序的PID号为143132，接着【Ctrl + Alt + Delete】打开任务管理器，找到PID号为143132的进程，结束该进程，然后再重启服务项目即可。项目未成功启动，则需要查看前端项目为什么没有启动成功，这个原因复杂不再具体说明，可以试着重启服务项目，多重启几次。打开“我的电脑”，选择左上角的“计算机”中的“卸载或更改程序”。点击确定，然后浏览器验证，localhost已经可以访问了！（此处我查看的端口是8081，注意更换成自己的端口号）
vue 前端代码其他局域网无法访问
piaomiaozaitianya的博客
02-12 294
代码没问题，该加的 0.0.0.0配置也加上了，代码拷贝到其他电脑vsCode运行，能正常访问。将专网切换成公网链接，并端口开放后解决该问题。最后发现是网络问题；
vue项目启动后无法访问
04-02
### Vue 项目启动后页面不可访问解决方案 #### 配置 `devServer` 属性 在开发环境中，Vue CLI 提供了一个内置的 Webpack 开发服务器 (`webpack-dev-server`) 来托管应用。可以通过配置 `vue.config.js` 或者直接修改 `build/webpack.dev.conf.js` 中的 `devServer` 对象来解决问题。 1. **解决 Invalid Host Header** 如果浏览器打开特定域名（如 www.local.com）时提示 `Invalid Host header` 的错误，可以在 `devServer` 对象中添加属性 `disableHostCheck: true`[^1]。这会禁用主机头验证，从而允许自定义域名访问。 2. **绑定到所有网络接口** 默认情况下，Vue 项目的开发服务器只监听本地回环地址 (localhost)，因此其他设备或者同一台机器上的不同 IP 地址无法访问。可以将 `host` 设置为 `0.0.0.0`，这样它会在所有的网络接口上运行[^3]： ```javascript module.exports = { devServer: { host: '0.0.0.0', // 绑定到所有网络接口 port: 8080, disableHostCheck: true // 解决 Invalid Host header 错误 } }; ``` 3. **跨域问题处理** 若存在前后端分离的情况，可能会遇到跨域请求失败的问题。可以在 `devServer.proxy` 中配置代理规则，使前端能够通过相对路径向后端发送请求而无需担心跨域限制[^2]： ```javascript module.exports = { devServer: { proxy: { '/api': { // 将 /api 开头的请求转发给后端服务 target: 'http://backend.example.com', changeOrigin: true, pathRewrite: { '^/api': '' }, }, }, }, }; ``` 4. **防火墙设置** 即便完成了上述配置，在某些操作系统下仍然可能出现由于防火墙阻止外部设备访问指定端口而导致无法连接的现象。此时需要检查并调整防火墙策略以开放对应的服务端口号[^4]。对于 Windows 用户来说，可通过控制面板进入高级安全选项创建入站规则；Linux 则可利用命令行工具如 `ufw` 或 `iptables` 进行管理。 5. **测试与确认** 完成以上更改之后重启开发环境，并尝试从本机以及局域网内的其它计算机分别访问新设定好的 URL 和端口组合，比如 http://<your-ip>:8080 。如果一切正常，则应该可以看到预期的应用界面。 --- ### 注意事项 - 修改 `node_modules` 下的内容并不是推荐的做法，因为这些改动会被未来的依赖更新覆盖掉。建议优先考虑使用官方支持的方式来进行定制化配置。 - 当生产环境下部署时，请勿保留调试模式开启状态(`debug=true`)或暴露敏感信息(例如未加密传输密钥等)。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

平静方能至远

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值