记录一下vue项目打包成apk出现的踩坑场景，其实问题的出现是因为自己的不小心导致的参数没有配置成功，但是还是想记录一下整个排错的一个过程
vue项目在Hbuilderx中打包成apk
在web端也就是正常启动vue项目访问页面的时候，接口返回都是正常的，可以看到接口返回的状态也是200
部署到web线上地址也是能够登录成功，并且成功调用接口的
问题出现
apk 放到雷电模拟器中去使用的时候发现登录接口无法使用
具体问题表现为无响应，也不提示账号密码错误等信息，就是等待接口请求的状态
接着打开fiddler去抓一下请求，但奇怪的是fiddler也抓不到请求，也就是在点击登录的时候没有请求的触发
但是web端的时候是没什么问题的，在打包之后这种情况应该如果排查
使用VConsole查看
如果想要在打包后调试的话，查了一下资料发现可以生成一个控制台查看日志，这样会方便很多
具体操作就是在index.html的文件中写入这个代码，去生成一个控制台的按钮供我们使用
<script>
var vConsole = new VConsole({
defaultPlugins: ['network'],
disableLogScrolling: true
});
vConsole.pluginList.network.scrollToBottom = function() {
if (!this.vConsole.option.disableLogScrolling) {
var $box = vConsole.$.one('.vc-content');
$box.scrollTop = $box.scrollHeight - $box.offsetHeight;
}
}
</script>
加上标签后可以看到有一个按钮
可以看到有日志的打印和网络请求的查看，加上这个控制台确实方便了很多，可以找出很多打包后部署的bug。
定位问题
当我再次发起请求的时候，再去控制台的网络请求中查看是否发出了请求，可以看到请求是直接以根路径开头的，所以到这里的时候我突然发现是配置的问题导致的。
因为在web端部署的时候，请求的url一般写的是跟路径“/”,当部署到服务器上的时候由于有nginx的转发所以请求不会有问题的出现，但是手机apk没有对接口的转发，所以自然请求到的地址是没有响应的，并且这种请求也不会被抓包工具抓到
之后我们改下api的config配置，将需要配置的请求地址配置上去，现在打开控制台看下是否能够请求成功
总结
这个控制台的使用也比较方便，直接是在index.html的入口文件中加入即可，当我们想要去掉它重新部署上线的时候，也不用进行重新的打包，因为本来改的就是dist文件夹中的index.html，希望对大家有用
如果觉得有趣或有收获，请关注我的更新，给个喜欢和分享。您的支持是我写作的最大动力！
往期好文推荐
原文链接：https://juejin.cn/post/7348245676889194546 作者：一只大加号
