Vue前端使用HBuilder打包APP流程及细节

涉及工具软件：

• HBuilder软件最新版
• Visual Studio Code
• 手机一部（推荐安卓，亲测锤子手机）
• 商米收银机一台
• 谷歌浏览器
• Vue Cli 脚手架

第一步：将做好的Vue前端进行Build命令发布

重点

路径问题：因为正常Vue内调试的时候使用的publicPath=‘/’ （注意publicPath的默认值就是/）,但是打包成app以后需要变换成相对路径（./）,即publicPath=‘./’，否则会发生所有资源全部找不到错误提示。

API接口数据传输问题：正常的Vue跨域在这里的不起作用的，需要手动更改配置文件中API接口前缀，并附带接口跨域网址，如下图所示

第二步：将发布后的文件在HBuilder中导入，并将W模式转换成A模式

主要是要生成manifest.json文件，并进行APP发布的各项参数配置

第三步：先连接真机（安卓的）进行测试确保真机状态下无任何问题

（注意：此处一般会产生的问题是路径错误或者API请求连接错误）

第四步：发布打包app

安卓和IOS都可以，亲测安卓、IOS均没有问题

第五步：安装应用体验功能，测试数据完整度。