vue如何在移动端调试

薄洪涛6年前JS1572

    最近配合做vue的项目开发,我们前端遇到了一些问题,在调试android和ios样式兼容的时候,需要在手机上调试,但是又需要部署包发到服务器上,然后才能看到样式;十分繁琐,现在我就教大家如何在本地调试;

    第一步,打开package.json文件,找到下面这段代码,加上--host 自己的局域网ip

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.50.214", 
  "start": "npm run dev",
  "lint": "eslint --ext .js,.vue src",
  "build": "node build/build.js"
},

    第二步,重启服务,nmp run dev

打开手机,输入你电脑的ip+端口,比如我的是http://192.168.50.214:8080 就可以访问了

如果想看console信息,或者想看网络请求怎么办呢?很简单,抓包就可以了,请看教程

  1. 安装抓包工具 npm install spy-debugger -g

  2. 手机和电脑连接同一个网络 ,手机设置代理,就是设置--wifi那里,选择你连接的网络,有个代理,选择手动,ip输入你电脑的局域网ip,端口按照第三条的命令的结果输入

  3. 执行 spy-debugger,记住,这里弹出的ip是不准确的,请用ipconfig或者ip addr获取你的ip

  4. 等待就可以了,手机请求接口

image.png

标签: vue

相关文章

vue2.0搭建vue脚手架

vue2.0搭建vue脚手架

最近有个项目,老大评估后想用前后端分离技术来做,借这个机会来熟悉下vue前端框架,这次就搭建一个vue项目,下一个目标就是把vue和yii2.0整合;开搞搭建node环境这步很简单,下载安装包右键安装...

vue搭建基于融云的聊天室

    最近项目比较忙,在做完了一个在线问诊的项目后,想给大家分享下其中用到的,但是百度上资料又比较少的技术    需求...

vue中axios请求接口性能优化

vue中axios请求接口性能优化

    Vue的开发者都知道axios,很多都用axios来进行数据交互,axios的默认请求头是Content-Type: application/jso使用...

ios textarea标签的placeholder属性多行时被隐藏

ios textarea标签的placeholder属性多行时被隐藏

我们使用的textarea 来做了病情描述,但是在ios手机上,当删除输入的文字后,placeholder显示不全,只有键盘收回的时候,才可以显示,如下图导致的原因目前不明确,但是百度上说有可能是以下...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。