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

最新推荐文章于 2024-06-07 08:40:07 发布
最新推荐文章于 2024-06-07 08:40:07 发布
阅读量1.9k 收藏 12
点赞数 15
文章标签： vue.js 前端 javascript json 前端框架 npm node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/conscience50/article/details/134754161
版权

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

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

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

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

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

解决措施：

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

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

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

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

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

平静方能至远
关注
  • 15
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vite启动后提示“Network: use `--host` to expose“，且无法通过网络IP访问服务
2301_77415960的博客
11-24 1672
简单来说就是方便自己手机本地访问而查看的 Network地址。
webpack vue项目开发环境局域网访问方法
08-27
下面小编就为大家分享一篇webpack vue项目开发环境局域网访问方法，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧
完美解决通过IP地址访问VUE项目的问题
10-15
主要介绍了完美解决通过IP地址访问VUE项目的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目配置同一局域网可使用ip访问的操作
01-18
1、检查 package.json文件，scripts.dev设置 host改成 “0.0.0.0” 2、config文件中找到 index.js 文件的host改成 “0.0.0.0” 此处的”0.0.0.0″可以改成自己的ip，重启项目就可以了 补充知识：@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案 今天他们遇到一个很有意思的bug，用@vue/cli创建项目的时候报错了，还是个从来没见过的报错： 一开始以为是版本问题，毕竟报错信息上写着update，但是cli的版本是最新的，
关于本地启动vue项目访问接口出现跨域问题（同源策略）---已解决
weixin_43925869的博客
05-13 143
【代码】关于本地启动vue项目访问接口出现跨域问题（同源策略）---已解决。
vite项目启动后用局域网不能访问
最新发布
m0_55333789的博客
06-07 390
想要真正实现让不同的设备能够访问我们做的web时，就需要解决这个问题，localhost 替换成本机 ip 地址之后无法访问。就连用127.0.0.1都无法访问。尝试多次之后，最后证明只有使用localhost这种形式才可以。构建的Vue项目在一开始创建后，默认设置的是只能用localhost这种形式来访问。如果把localhost换成本主机的。.config.js文件中设置如下。ip地址之后页面无法访问了。
Vite内网ip访问，两种配置方式
前端蜗牛君
02-21 7320
方式一：修改vite的配置文件（vite.config.ts）方式二：修改package.json文件。运行项目的时候，控制台会只出现。采用上面任一方式，就可以通过。
vite中使用局域网访问项目
~~
01-10 4500
在运行vite项目后，发现只能本地访问，不能局域网访问，package.json如下。
【异常解决】vue项目localhost:8080无法访问此网站或者无法访问此页面，localhost拒绝了我们的连接请求
热门推荐
No8g攻城狮的博客
04-06 3万+
出现如图所示，8081端口被占用，且占用该程序的PID号为143132，接着【Ctrl + Alt + Delete】打开任务管理器，找到PID号为143132的进程，结束该进程，然后再重启服务项目即可。项目未成功启动，则需要查看前端项目为什么没有启动成功，这个原因复杂不再具体说明，可以试着重启服务项目，多重启几次。打开“我的电脑”，选择左上角的“计算机”中的“卸载或更改程序”。点击确定，然后浏览器验证，localhost已经可以访问了！（此处我查看的端口是8081，注意更换成自己的端口号）
vue项目netWork地址无法访问问题解决方案
episode33的博客
06-07 3805
此方案可以解决vue项目 Network: unavailable和network访问失败的问题
Vue 局域网使用ip无法访问的解决方法
shylcok的博客
01-07 1630
搜到了很多解决方法，但是，尝试到这个才能用 版本： [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
局域网如何让别人访问本地vite+vue3项目
Yajyaj123的博客
05-15 1051
-port 指定端口，80的话直接输入ip即可访问，只需要npm run dev 即可，别人可以通过IP访问。打开package.json。
vue-cli启动本地服务局域网不能访问的原因分析
01-19
 本地vue-cli启动了一个项目只能通过localhost:8080访问到，同一局域网下其他的手机和电脑并不能通过ip地址访问调试， 2.原因：vue-cli项目是通过命令行一键生成的，配置文件中默认生成的是本地调试模式，默认访问...
关于vue项目本地localhost可以正常访问项目，ip却无法访问项目的解决办法
博哥的二进制世界
09-21 4031
关于vue项目本地localhost可以正常访问项目，ip却无法访问项目的解决办法 在进行本地页面调试的时候，地址栏可以输入两种地址来访问页面 http://localhost:8080 http://192.168.97.15:8080 但是此时碰到了一个问题，即http://localhost:8080可以访问页面，但是 http://192.168.97.15:8080却无法访问页面 首先以为是防火墙的问题，当关闭了防火墙，问题并未解决 之后，修改vue项目中config目录中index.js，将
Vue项目启动默认打开http://0.0.0.0:8080，浏览器显示无法访问，手动修改为 localhost:8080 可正常打开
jsyxiaoba的博客
11-19 768
Vue项目启动默认打开http://0.0.0.0:8080，浏览器显示无法访问，手动修改为 localhost:8080 可正常打开
Vue.js - 如何解决Vue项目IP地址无法访问的问题？
牧码的博客
08-06 3696
Vue脚手架vue-cli起的webpack项目，用localhost可以正常访问，切换到ip就提示无法访问此网站，下面是详细的介绍。 在编写项目时，有的时候localhost的链接是可以正常访问的，但是我们需要在其他设备上也访问到改地址，所以就需要ip地址进行访问了，但是ip访问提示我们无法访问此网站。 查看 config 文件夹下的 index.js 修改index.......
vue项目只能通过localhost和127.0.0.1访问
weixin_43728276的博客
04-22 3315
Q：使用npm run dev启动vue项目后，在本机使用localhost和127.0.0.1正常访问，使用却无法访问。 A: 在项目的配置文件中，设置了local host访问，将config/index.js下的host改为’0.0.0.0’即可
vue项目只能本地localhost访问网页，手机访问不了网页的问题
qq_30424359的博客
07-31 3455
webstorm,npm run dev 只显示本地访问地址 想要手机访问需更改设置 重新npm run dev 完美解决问题
vite运行只能访问localhost解决办法(Network: use --host to expose)
weixin_61570458的博客
09-27 2419
【代码】vite运行只能访问localhost解决办法(Network: use --host to expose)
我想要用vue写一个前端项目, 我该怎样在局域网外也能访问该项目
05-30
要在局域网外访问你的Vue前端项目，需要将你的项目放到一个公网可访问的服务器上，并且需要将服务器的防火墙规则进行相应的设置。下面是一些步骤： 1. 选择一个云服务器提供商，例如阿里云、腾讯云、AWS等。 2. 在服务器上安装Node.js及Vue CLI。可以使用SSH连接到服务器，使用以下命令： ``` sudo apt-get update sudo apt-get install nodejs npm sudo npm install -g @vue/cli ``` 3. 在服务器上创建一个Vue项目。使用以下命令： ``` vue create my-project ``` 4. 在服务器上启动Vue项目。使用以下命令： ``` cd my-project npm run serve ``` 5. 在服务器上设置防火墙规则，开放Vue项目所使用的端口，例如80端口。可以使用以下命令： ``` sudo ufw allow 80/tcp ``` 6. 在服务器所在的路由器上设置端口转发规则，将公网IP的80端口映射到服务器的80端口上。 7. 现在，你可以通过公网IP地址访问你的Vue项目。在浏览器中输入公网IP地址即可。 请注意，为了保障你的服务器安全，你需要采取一些安全措施，例如设置服务器的SSH登录密码、禁止root用户登录等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

平静方能至远

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

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

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

打赏作者

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

抵扣说明：

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

余额充值