vue项目局域网通过ip访问

最新推荐文章于 2024-06-24 11:03:14 发布
最新推荐文章于 2024-06-24 11:03:14 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： 前端知识积累 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bocaidada/article/details/86542338
版权

使用vue-cli搭建的项目，需要同一局域网都可以通过本机IP地址访问到
在config文件中找到 index.js 文件 中找到下面代码
在这里插入图片描述
将此处的host改为0.0.0.0就可以，或许有的小伙伴同一局域网打开ip+端口号开还是不能访问，此时只需要关闭防火墙就好了

查看本机IP
按住win+R，输入cmd
在这里插入图片描述
然后输入ipconfig就可以了
在这里插入图片描述

bocaidada
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 项目设置局域网IP地址访配置
Lisa_Xiaotouzi的博客
05-11 1976
为了方便项目的开发进展，可以设置同一局域网访问本地ip地址 ---菜鸟一枚，写得超级详细 1.cmd打开命令指示符：ipconfig/all 查看自己的IP地址 2.修改config文件中找到 index.js 文件的host改成 IP地址：192.168.1.166 3. 修改项目文件夹下的package.json 文件配置，scripts.dev配置在默认的情况下加上 --host 192.168.1.166 完整写法： 注意：package.json比较特殊，不可有注释条目，不
同一局域网访问本地 Vue 项目
grootbaby
03-03 1181
同一局域网访问本地 Vue 项目 需要访问电脑需要在同一局域网下 | | 连同一个WiFi，这个就不说了吧。懂得都懂。 调试机 ip：192.168.30.100，将 192.168.30.100 改为你自己本机 ip 就OK。 不需要修改配置文件 重启本地环境： yarn run dev --host 192.168.30.100 （ 加红的 yarn 是关键，不要尝试用 cnpm 或者 npm ） 需要修改配置文件 方法一： 在 config/index.js 文件中找到 h
vue-cli3如何在局域网通过ip访问项目
chenrui310的博客
11-04 2677
1、创建vue.config.js (cli3相对于cli2，之前的build和config文件夹不见了，那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件（是根目录，不是src目录)） module.exports = { devServer: { port: 8080, // 端口号 host: "localhost", https: false, // https:{type:Boolean}
vue项目中获取内外网ip的方法
weixin_42255542的博客
12-14 5001
vue项目中获取内外网ip的方法
局域网内vue2 3 配置本地IP地址访问项目
最新发布
m0_68716504的博客
06-24 793
/在这句代码后面添加 --host 0.0.0.0" 如下messages: [ //下面两个地方，直接复制即可` - Local: http://localhost:${port}`, //配置这里` - Network: http://${require('ip').address()}:${port}`,//配置这里],},?}))
Vue项目启动时自动获取本机IP地址
热门推荐
落日夕霞的博客
01-26 1万+
前言 在启动vue项目时，我们发现需要自己配置启动的ip地址，这样在多人开发便显得很不方便。 解决方案： 使用vue-cli构建项目：（其他配置类似） vue init webpack myproject 1.在当前的build目录下新建一个get-ip.js文件用来获取本机ip地址 // build/get-ip.js var os = require('os'), ip = '', ifa...
【vue】vue.config.js里面获取本机ip：
SunPeng的博客
01-29 1663
【vue】vue.config.js里面获取本机ip：
vue获取本机ip地址
m0_55921724的博客
03-08 7236
vue 获取本机IP地址
vue项目配置同一局域网可使用ip访问的操作
01-18
此处的”0.0.0.0″可以改成自己的ip，重启项目就可以了 补充知识：@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案 今天他们遇到一个很有意思的bug，用@vue/cli创建项目...
webpack vue项目开发环境局域网访问方法
08-27
最后，需要注意的是，一旦你将`host`设置为局域网IP，本机上使用`localhost`或`127.0.0.1`将无法访问开发服务器。同样，局域网内的其他设备必须使用这个设定的IP地址来访问。为了方便团队协作，确保所有成员都知道...
完美解决通过IP地址访问VUE项目的问题
01-21
第一步 1.将config里面的host设置成0.0.0.0 ...第一步和第二步都有ip，其实第二步优先级高，这里第二步的host可以不设置，vue默认执行第一步的设置 3.查看开发机的ip地址，并告诉给其他小伙伴，还有端口号 补充
vue-cli项目无法用本机IP访问的解决方法
10-17
总的来说，解决Vue CLI项目无法通过本机IP访问的问题，主要是调整开发配置，使服务器监听所有网络接口。这一改动对于多设备预览和跨平台测试非常有用，同时也提醒我们在开发过程中要注意网络安全。
Vue2 显示当前时间和ip地址
知远同学的博客
02-15 524
时间会自动更新，获取本机的IP地址。
vue项目配置局域网可访问（局域网通过ip地址访问本地项目）
starstarstarl的博客
03-01 742
vue项目配置局域网可访问，局域网通过ip地址访问本地项目
Vue项目设置局域网可以访问
IT之一小佬的博客
06-23 3370
Vue项目设置局域网可以访问
实现vue项目可通过 IP 和 localhost
Summer_JK的博客
02-01 1351
实现vue项目可通过 IP 和 localhost 同时访问项目
同一局域网下访问vue项目
qq_43183942的博客
04-15 6564
#同一局域网下访问vue项目 ##同一局域网： 在你的电脑上用快捷键windows + R打开cmd，使用ping + ip地址（想要访问你项目的那台电脑的ip地址），如果成功后就表示你们处于同一局域网下。 ##本机ip地址 在你的电脑上用快捷键windows + R打开cmd，使用ipconfig命令，就可以看到本机ip地址。 ##访问本地项目 当你成功执行上一步，确定你们处于同一局域网下后：在你的项目中找到config文件夹，找到index.js文件，你可以看到host:localhost(默认)，
VUE-获取本地局域网IP地址
梦翼横空的专栏
02-25 6643
vue获取本地局域网IP地址
局域网下别人访问本地运行的vue项目
weixin_52268321的博客
06-12 1114
进入“防火墙和网络保护”，关闭下面三个。
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 访问的原因之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值