关于vue项目本地localhost可以正常访问项目，ip却无法访问项目的解决办法

最新推荐文章于 2024-03-08 16:21:51 发布
最新推荐文章于 2024-03-08 16:21:51 发布
阅读量4.1k 收藏 1
点赞数 3
分类专栏： 项目中碰到的一些bug和特殊情况 vue 文章标签： vue javascript 前端
Edited by Boale_H （博哥的二进制世界）
本文链接：https://blog.csdn.net/Boale_H/article/details/108713272
版权

关于vue项目本地localhost可以正常访问项目，ip却无法访问项目的解决办法

在进行本地页面调试的时候，地址栏可以输入两种地址来访问页面

  1. http://localhost:8080
  2. http://192.168.97.15:8080

但是此时碰到了一个问题，即http://localhost:8080可以访问页面，但是 http://192.168.97.15:8080却无法访问页面

首先以为是防火墙的问题，当关闭了防火墙，问题并未解决

之后，修改vue项目中config目录中index.js，将dev中的host由localhost修改为0.0.0.0，重新启动项目，问题得已解决
在这里插入图片描述

Boale_H
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
完美解决通过IP地址访问VUE项目的问题
10-15
在开发Vue项目时，我们通常使用`localhost`或者`127.0.0.1`来运行项目，但这只允许我们在本地环境进行测试。如果需要让其他设备（如手机或另一台电脑）访问我们的Vue应用，我们就需要通过IP地址来访问。本文将详细...
vue-cli项目无法用本机IP访问的解决方法
10-17
总的来说，解决Vue CLI项目无法通过本机IP访问的问题，主要是调整开发配置，使服务器监听所有网络接口。这一改动对于多设备预览和跨平台测试非常有用，同时也提醒我们在开发过程中要注意网络安全。
VUE_nuxt启动只能通过localhost访问，ip访问不到:问题解决
最新发布
小歪博客
03-08 585
VUE_Nuxt启动只能通过localhost访问，ip访问不到:问题解决
vue项目访问的时候，用localhost能访问，但是用本机ip就不能访问 的解决办法，亲测有效
CS13477062349的博客
06-18 8836
vue项目搭建好后，用localhost:8080 访问的时候，能够访问页面。 但是用本机ip:8080访问页面的时候失败 这时在config/index.html中修改dev下的host为：0.0.0.0就可以了。 ...
vue项目使用localhost能访问使用ip地址却访问不了
weixin_40910109的博客
11-26 4315
修改本机的 C:\Windows\System32\drivers\etc\hosts 域名映射 Vue项目可以使用localhost:8080可以访问的，但是修改域名映射之后mytaobao.com:8080不能访问 使用本机ip:8080也不能访问 修改config/index.js为 host: '0.0.0.0'可以使用ip:8080访问本项目了 但是mytaobao:...
解决Vue项目IP地址无法访问（localhost可以访问）的问题？
gaoyaqinglove的博客
08-06 4451
修改项目config目录下index.js文件的host为：0.0.0.0，然后重启服务，即可通过ip访问该项目
vue项目网页访问时，用localhost能访问，但是用本机ip就不能访问
丁哒哒的博客
03-06 6618
vue项目搭建好后，用localhost:8080 访问的时候，能够访问页面。但是用本机ip:8080访问页面的时候失败 只需要修改config/index.js中dev内的host为：0.0.0.0就可以了，如下图 ...
关于可以通过本地访问前端vue项目，不能通过ip访问的问题
upStar1的博客
07-26 3968
和后端联调，后端要看我的前端页面，输入我的ip和端口，发现访问不了。搜了一下问题，是需要打开项目中config目录中index.js，将dev中的host由localhost修改为0.0.0.0。
vue 本地服务不能被外部IP访问的完美解决方法
10-17
总的来说，通过修改`webpack-dev-server`的配置，我们可以轻松解决Vue本地服务不能被外部IP访问的问题。这种方法适用于开发者需要跨设备测试或协作的情况，但同时也需要注意安全问题。希望这篇文章对你有所帮助，...
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
10-14
主要介绍了解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Linux&服务器vue项目外部无法访问
智三岁的博客
02-14 1972
Linux&服务器vue项目外部无法访问 第一步：编辑 项目中的package.json 添加 --host 0.0.0.0 第二步：编辑项目中的 config/index.js 将host后面修改为 自己ip地址 最后npm run dev 启动 ...
为什么启动了vue以后另外一台电脑访问不了对应的页面？
AlphaFinance
12-13 1924
当你在本地启动了 Vue 项目以后，它只会在本地电脑上运行，其他计算机无法访问。如果想要让其他计算机能够访问，你需要在本地电脑上运行一个服务器，并将 Vue 项目部署到该服务器上。这样，其他计算机就能通过服务器的网址来访问你的 Vue 项目了。
Vue项目启动默认打开http://0.0.0.0:8080，浏览器显示无法访问，手动修改为 localhost:8080 可正常打开
jsyxiaoba的博客
11-19 787
Vue项目启动默认打开http://0.0.0.0:8080，浏览器显示无法访问，手动修改为 localhost:8080 可正常打开
关于netcore5，运行后，只能通过localhost，而无法通过ip地址进行访问
u012243787的博客
07-02 3547
关于netcore5，运行后，只能通过localhost，而无法通过ip地址进行访问，解决方法如下 方法1、 在Program.cs文件里，修改如下： Program { Main([] args) { CreateWebHostBuilder(args).Build().Run(); } IWebHostBuilder CreateWebHostBuilder(string[] args) =&g
Vue.js - 如何解决Vue项目IP地址无法访问的问题？
牧码的博客
08-06 3723
Vue脚手架vue-cli起的webpack项目，用localhost可以正常访问，切换到ip就提示无法访问此网站，下面是详细的介绍。 在编写项目时，有的时候localhost的链接是可以正常访问的，但是我们需要在其他设备上也访问到改地址，所以就需要ip地址进行访问了，但是ip访问提示我们无法访问此网站。 查看 config 文件夹下的 index.js 修改index.......
vue axios 部署到服务器 访问localhost是不行的
jonathan_joestar的博客
07-13 1127
vue axios 部署到服务器 访问localhost是不行的，就算相对于服务器来说，后端就是localhost，但是他访问不通，必须用ip
使用localhost可以打开，使用IP地址无法打开。解决报错HTTP Error 400. The request hostname is invalid.
岔路ko的博客
06-27 4232
问题点 VS编译的WebAPI只能使用 http://localhost:64734/API/Default/GETIP 无法使用 http://127.0.0.1:64734/API/Default/GETIP 解决方法 1，找到.VS文件夹 2，找到文件D:\桌面\WebAPIArduino.vs\config\applicationhost.config 路径根据项目而定。 D:\桌面\WebAPIArduino 搜索localhost 后，把localhost改为* 修改后结果 亲测
localhost可以访问，使用ip地址失败
热门推荐
PhilsphyPrgram的博客
01-08 1万+
场景:使用手机访问同一局域网内的电脑，无法访问的问题，前段使用的是vue的框架。 Vue的框架配置 在package.json中 "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js", –host 0.0.0.0 可以实现除了localhost之外，其他的ip地址也可以访问 ...
vue/cli4 无法通过ip访问本地项目
09-03
vue/cli4 默认的启动命令是通过 localhost 来访问本地项目的，因此无法直接通过 ip 地址来访问项目。但是我们可以通过修改配置文件来实现通过 ip 访问本地项目的功能。 首先，打开项目根目录下的 vue.config.js 文件，如果没有则新建一个。在该文件中添加以下代码： module.exports = { devServer: { open: true, host: '0.0.0.0', port: 8080, https: false, hotOnly: false, disableHostCheck: true, } } 上述代码中的 devServer 部分是用来配置开发服务器的选项。其中 host 字段设为 '0.0.0.0'，表示允许其他设备通过电脑的 ip 地址来访问项目。端口号 port 可以根据需要进行修改。 保存文件后，在命令行中执行 npm run serve 来重新启动项目。 接着，打开浏览器，输入电脑的 ip 地址加上之前设定的端口号（例如 http://192.168.1.100:8080），回车即可通过 ip 访问本地项目。 需要注意的是，只有连接到同一局域网下的设备才能通过 ip 访问到本地项目。若无法正常访问，请确保设备与电脑处于同一网络环境下。另外，关闭防火墙或在防火墙中添加对应的端口规则也可能是导致无法通过 ip 访问的原因之一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值