【图解】vue2.x项目用HbuilderX打包成app

前言

业务需求：一套代码同时满足H5和APP使用；

工具：HbuilderX、VSCode、模拟器（自己熟悉的一款就行），将这三个工具都打开
ps: 模拟器需要连接上HbuilderX，以作测试。 附上网友分享的模拟器连接教程：HbuilderX运行到模拟器

注：电脑重启后，若需要再次重连模拟器，打开cmd，输入 adb devices命令，会获得新的模拟器设备地址。

步骤解析

1、打开HbuilderX，新建项目：选择 5+App

2、创建成功后，打开资源管理器，进入刚刚创建的项目根目录，替换同名的资源文件

1. 删除5+App项目内的资源文件

3. 打包vue项目，生成dist文件夹
   

ps：这里替换文件夹需要注意，可能会存在以下不同的情况：

3. 打开HbuilderX，将index.html文件下的资源路径修改为相对路径，否则运行时会白屏

注：若你的vue项目内存在vue.config.js文件，并配置了publicPath，可以忽略这步操作，只需将publicPath设置为 “./” 即可。

4. 打开HbuilderX，选择运行 - 运行到手机或模拟器 - 运行到Android APP 基座
   
   
   5.进入启动页面，成功