Vue项目中使用浏览器同步测试工具 browersync

问题:

在写Vue项目的时候,我们有时候需要在不同的设备中进行的调试。这时候就会很烦——比如要进行一个跳转首页的操作,我们需要在电脑上和手机上分别操作一次。

解决:

利用browser-sync插件 。就可以实现在电脑上进行点击跳转首页的操作,手机上也可以自动进行相同的操作。这样我们在一个设备中进行调试,其他设备就能自动同步调试操作。

使用:

1、安装browser-sync

npm install --save-dev browser-sync

2、配置根目录下的packjson.json文件

在”script”中添加下面的代码

"watch": "browser-sync start --proxy 'localhost:8080' --files '**'"

3、启动browser-sync

注:别忘了保持项目运行(npm run dev)

npm run watch 

这样就可以开始调试页面了。你会发现在一个设备调试页面,其他设备也会实时更新。

打开多个http://localhost:3000/或者http://192.168.77.1:3000/(根据自己的实时情况),进行某个操作,比如在一个窗口或设备上进行点击跳转首页操作,其他窗口或设备上会自动同步操作

发表评论

电子邮件地址不会被公开。 必填项已用*标注