vue项目，手机电脑同一wifi防火墙也关闭了，npm run dev 运行pc端访问本地ip没问题，mobile端访问空白？

Posted 2023-04-01

vue项目，手机电脑同一wifi防火墙也关闭了，npm run dev 运行pc端访问本地ip没问题，mobile端访问空白？

一、在服务器环境下通过IP访问

首先搭建一个服务器环境或者下载现成的程序集成包（比如phpstudy、jspstudy等）。

确保服务器和手机连接在同一网段。如果是笔记本的话，手机和笔记本直接连接在同一wifi下，如果是台式机，则需要插入无线网卡或者其他的无线措施确保两个在同一网段下。

通过本机IP+端口访问需要测试的项目。

二、liveStyle

liveStyle是个提供“样式实时预览”插件，在编辑器和控制台能够单向/双向实现样式修改的同步，而且对移动页面的远程调试也是非常方便。

在sublimeText通过package安装liveStyle，在chrome安装扩展liveStyle插件。

点击chrome浏览器右上角的liveStyle图标选择同步方式，添加需要修改的css,然后打开编辑器修改对应样式或者在控制台修改样式即可实现双向同步。

移动设备的远程调试 
在liveStyle（http://livestyle.io/）官网下载Emmet LiveStyle APP。安装成功之后打开APP，执行上面的三步，然后完成下图操作后在手机打开生成的网址即可访问本地的项目。

参考技术A

原因是部分andorid手机浏览器不支持ES6，所以打开一片空白（已测试小米和iphone支持，华为和一加不支持）。如果你是wabpack项目打包应该没这问题（我试过了），如果是静态页面CDN引入vue就会有这个问题。

解决方法：

方法一：页面引入babel-polyfill。

<script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-beta.49/polyfill.min.js"></script>

方法二：参考网友王泽平的博客

npm install --save-dev babel-polyfill

引入babel-polyfill的方法有三种：

import "babel-polyfill";

require("babel-polyfill");

module.exports = 
　entry: ["babel-polyfill", "./app/js"]
;

求前端大神帮忙，vue项目，修改了index.js ,的host:'192.168.1.101 ',之后，不能在手机上预览，

在同一wify下，本想要本地的vue项目能够在自己手机上预览，修改图，不但手机上不能预览，再次npm run dev 之后报错是为什么？我在github上弄的别人的项目，修改host参数之后，能够在自己的手机上预览。
在我将host:'localhost'修改为上图ip地址之前是可以在电脑上访问的，修改了IP之后在电脑上也是不能访问了，ip地址是正确的，也是在同一局域网下，也排除电脑防火墙的问题，

看你第二张图的日志，说明webpack-dev-server并未启动成功。
在启动过程中遇到了错误，日志显示错误原因是无法解析192.168.1.102。可能造成的原因一个是你没有访问192.168.1.102的权限；还有一个原因是因为你环境的原因，调用函数错误，没法执行getaddrinfo。

前者的解决方法是把host改为0.0.0.0。这样无论谁都可以访问这个server了，本来开发环境就没有太大的关系。如果你需要更严谨的IP限定，可以在0.0.0.0测试正确后，再找到之前的错误原因，改用合适的IP。
后者的解决方法，因为由于是系统的原因，则需要去判断到底是哪里导致的问题。这里的线索太少，无法提供准确的解决方案。追问

按照你说的把host改成了0.0.0.0后，其实我这边0.0.0.0:8081/的地址还是不通，但是localhost:8081这个还是通的，然后我又傻傻的把host改成192.168.1.102，没想到电脑和手机上192.168.1.102:8081/都可以访问了，菜鸟都不知道发生了什么。
谢谢你的帮助！

参考技术A host:'192.168.1.101 '在101后面有一个'192.168.1.101' Vs '192.168.1.101'空格，就无法绑定本机ip了。（把空格去掉就可以了,后面的引号）
这个host：ip其实就是框架的一个服务和IP绑定。只有改ip的请求才会接受。其他的拒绝
你也可以改成host: '0.0.0.0' 这样你的服务接受所有的ip 参考技术B 你的本机IP是1.101吗？