vue项目（webpack+mintui），使用hbuilder打包app _vue项目

少年乘勇气，百战过乌孙。这篇文章主要讲述vue项目（webpack+mintui），使用hbuilder打包app相关的知识，希望能为你提供帮助。
一、配置config/index.js
本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。
（1）页面空白的解决：
打开config/index.js，将build模块的assetsPublicPath值改为’./’

文章图片

assetsPublicPath: \'./\',发布路径

（2）css引用图片资源找不到问题：
因为打包后路径发生变化，导致这个图片就找不到。 stackflow上有一个解决办法，很简单打开“build/utils.js”，增加一行代码即可

文章图片

publicPath:\'../../\'

二、通过webpack打包

文章图片

执行这样命令后，可以看到根目录的dist文件夹下是打包好的静态资源

文章图片

这样就打包好了，里面有index.html 以及 static文件夹（包含fonts、img、js、css文件夹）两个
三、使用hbuilder打开
将dist文件下拖动到huilder软件中即可

文章图片

dist文件夹，就是拖动进去的，A 标记是app的意思，W是web的意思。我这里是已经转为app了，所以dist文件夹以 A 标识，没有转换之前是 W 标识
四、转换为移动APP
由于我已经转为APP，我用helloHBuilder做示范

文章图片

右键需要转为app的文件夹，弹出的快捷菜单中——> 转换成移动APP(T)。

文章图片

点击“我知道了”之后，发现dist文件夹会多了一些文件

文章图片

五、配置manifest.json
（1）应用信息配置

文章图片

“应用名称” ：给你的app取个名字
“appid” ：右侧点击“云端获取”，要登录注册你的账号之后，点击‘云端获取’会自动给你填上
“页面入口” ：主页面，因为我是用vue开发的，所以我只有一个HTML文件，是index.html
【vue项目（webpack+mintui），使用hbuilder打包app】（2）图标配置

文章图片

其余的”启动图片” “sdk配置” ...我直接略过了
配置应用信息和图标配置先试试效果，配置好后，保存。

六、真机运行试看效果
准备好你的手机，用usb数据线连接，开启开发者模式（关于手机——> 连续点击版本号，进入开发者模式），允许usb调试。
点击hbuilder工具栏上的 “在设备上运行/停止应用”图标，类似于