首页 技术JS正文

vue如何在移动端调试

薄洪涛 JS 2019-07-24 1232 0 vue

    最近配合做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

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论