您现在的位置是:网站首页> 编程资料编程资料
vue 同局域网访问不到的问题及解决_vue.js_
2023-05-24
489人已围观
简介 vue 同局域网访问不到的问题及解决_vue.js_
vue 同局域网访问不到
方法一
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 + 本地项目的端口号 别人打开这个就可以访问你本地项目了(类似于:192.168.100.100:8089 )

方法二
修改package.json文件添加
--host 192.168.1.199

vue项目配置在局域网下访问
1.vue配置
a.vue cli2.0配置如下

b.vue cli3.0不需要配置即可访问
2.如果上述配置无法访问则配置以下
需要配置一下电脑的防火墙,把所需的端口(如:8080)打开。
设置方法如下:
2.1 Windows 10 ,搜索“控制面板”,打开,Windows 7 可以直接在开始菜单打开。
2.2 点击“Windows Defender防火墙”——“高级设置”——新建“入网规则”。

2.3 规则类型选择“端口”

2.4 下一步“特定本地端口”填 8080-8088 (此处是一个 IP 段,因为如果打开多个项目,端口会被占用, Vue会自动分配一个新的端口。如:8081 )。

2.5下一步“允许连接”
2.6下一步选择开放的场景,注意一定要选前两个

2.7下一步输入规则名称,点击“完成”即可
这样用手机访问电脑 IP 加端口号,192.168.1.11:8080 就可以打开项目了。
注意:手机和电脑必须在同一局域网下才能访问,同事电脑同理
获取IP 方法:
打开命令提示行工具,输入 ipconfig 回车, 就可以看到自己的IP了,比如我的 192.168.2.103 。

这样更加方便真机调试,无需部署到服务器就可以进行访问和测试。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- vue的指令和插值问题汇总_vue.js_
- 使用微信小程序制作核酸检测点查询工具_javascript技巧_
- vue3中$attrs的变化与inheritAttrs的使用详解_vue.js_
- 在 React 中使用 Redux 解决的问题小结_React_
- vue下载文件以及文件重命名方式_vue.js_
- vue遍历中存在el-form之踩坑记录_vue.js_
- Vue支持搜索与筛选的用户列表实现流程介绍_vue.js_
- Vue中的路由配置项meta使用解析_vue.js_
- vue中将el-switch值true、false改为number类型的1和0_vue.js_
- 微信小程序实现tab组件切换动画_javascript技巧_
