使用HBuilderX将vue项目打包成app

Posted grani

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用HBuilderX将vue项目打包成app相关的知识,希望对你有一定的参考价值。

因为项目要用到手机扫一扫的功能,纯H5的话我百度之后只能做到调用摄像头,拍照后识别二维码,无法做到自动识别
看到H5+有扫码功能,所以今天尝试用HBuilderX将vue项目打包成app

总的流程很简单,这真的要感谢H5中国产业联盟做出的贡献。将vue打包,生成dist文件夹,HBuilderX创建H5+App项目,这里选择的是默认模版,然后将dist里的文件夹覆盖到新项目,就可以云打包成app下载到手机或者直接进行真机调试

  • 生成app后遇到的第一个坑就是白屏,原因是页面找不到
    为了解决跨域问题,原本vue build之后是放在php项目public/webstie里的,所以vue.config.js的publicPath设置为‘/website/‘
    配置参考-publicPath
    puclicPath默认值是‘/‘,因为vue-cli默认你的应用是放在根路径,现在放在子路径website里,所以要指定这个子路径
    打包后css和js请求路径就多了/website,与实际路径不符所以找不到资源
    解决办法是publicPath设置为‘./‘,请求本地资源,页面本来就没放在服务器

  • 页面出来后验证码不显示,请求接口也报错
    原本项目是同源请求,请求的接口直接/开头即可
    但在app中/明显不是服务器地址,所以要用绝对路径,使用域名会有问题,在phpStudy中设置第二域名,使用ip进行访问
    vue中创建变量存储访问地址,如

    var appUrl = ‘http://192.168.1.90:80
    ,然后在封装好的axios请求中加上此变量
    万幸app没有跨域问题,跨域是因为浏览器的同源策略而app不是浏览器

  • 真机调试时HBuilderX检测不到手机
    具体可看社区真机运行、手机运行、真机联调常见问题
    手机USB连接“仅充电”设置为文件传输,最好设置连接时默认就是文件传输
    关闭USB调试,以管理员身份运行HBuilderX,再打开USB调试,后面我用这方式都可以检测到手机

  • 突然间请求出现问题,验证码也获取不到
    因为吃饭回来后忘记连wifi了,用的流量
    服务在本机启动,在同一局域网内访问没问题,用流量的话相当于外网请求内网服务

以上是关于使用HBuilderX将vue项目打包成app的主要内容,如果未能解决你的问题,请参考以下文章

解决hbuilder打包vue项目app点击手机返回键直接退出app的问题

移动端用Cordova将vue项目打包成app

vue项目通过hbuilderx打包为apk

vue项目通过hbuilderx打包为apk

vue项目通过hbuilderx打包为apk

使用hbuilder X打包vue app