使用HBuilderX将vue项目打包成app

Posted 2022-05-29 grani

因为项目要用到手机扫一扫的功能，纯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了，用的流量
  服务在本机启动，在同一局域网内访问没问题，用流量的话相当于外网请求内网服务