【移动端】vue脚手架项目手机实时预览方法

在很多情况下，开发移动端项目 为了避免模拟器与真机之间的差异，大部分情况需要使用真机进行实测。

非脚手架项目的手机实时预览方法相对比较简单，请参阅我的另一篇文章【移动端】移动端项目手机预览方法

而脚手架项目则需要进行一些简单的配置才能实现手机实时预览的效果

今天我们这里讲一下如何使用手机实时预览 VUE 脚手架项目：

 

1、打开我们的 vue 项目目录，找到 config → index.js 文件

 

2、在dev模块下，找到并修改 host 为 “0.0.0.0” （默认为localhost）

 

3、获取本机的ip地址，获取方法如下：

window:  cmd命令行工具里 输入 ipconfig

mac:  终端输入 ifconfig

 

4、运行项目，保持手机和电脑处于同一个网络下，手机浏览器访问 本机IP + 端口号 （例如： 10.8.24.56:8080 ）

 

恭喜你~，已经实现了手机预览vue项目的效果了，并且更新代码后可以随时刷新预览哦~

参考链接：https://juejin.im/post/6844903801208619016