Question

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

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

Answer 1

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

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

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

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

二、liveStyle

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

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

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

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

Answer 2

原因是部分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"]
};