vue移动端-本地调试的两个方法

1.通过局域网ip访问——更改项目的host配置

   1) vue-cli2: config/index.js

         dev.host改为"0.0.0.0",重启之后就可以通过本地ip或者localhost访问

    2)vue-cli3:vue.config.js

        devServer.host 改为"0.0.0.0",重启之后就可以通过本地ip或者localhost访问

    3) script的dev后面加 --host 0.0.0.0

2.局域网charles+host映射(也可解决跨域)

    a. charles菜单proxy->Proxy Settings: 

        【HTTP Proxy】 Port写上8089(随意)

         勾选 Enable transparent HTTP proxying

    b.手机wifi设置代理

       安卓手机在已连接wifi长按---修改网络(其他手机自查)--显示高级选项--代理--手动:

       服务器主机名:填上你本地的ip:如192.168.100.1

       服务器端口:跟charles设置的Port一致(8089)

       然后保存,这时charles会弹窗询问,点allow即可

 c.vue项目要运行在80端口,修改方法参照1方法,但改的是port字段,改为80

 d.改hosts文件。win系统在C:\Windows\System32\drivers\etc\hosts

 127.0.0.1 www.baidu.com(域名自己决定)

 e.使用http协议,访问http://www.baidu.com,就可以访问你本地vue运行的代码了

 f.查看是否抓包成功,看network的app.js是否携带hash值,如果没有就是映射成功了 

    

    ps:hosts文件可能会有缓存

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值