vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想

一、配置config/index.js

本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。

（1）页面空白的解决：

打开config/index.js，将build模块的assetsPublicPath值改为’./’

1	`assetsPublicPath:` `'./', 发布路径`

（2）css引用图片资源找不到问题：

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

1	`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

（2）图标配置

其余的”启动图片” “sdk配置” ...我直接略过了

配置应用信息和图标配置先试试效果，配置好后，保存。

六、真机运行试看效果

准备好你的手机，用usb数据线连接，开启开发者模式（关于手机——>连续点击版本号，进入开发者模式），允许usb调试。

点击hbuilder工具栏上的 “在设备上运行/停止应用”图标，类似于这样，选择第一个模式运行

接下来，看看你的手机

手机现在提示：电脑安装位置来源同意安装

会在你的手机的桌面上安一个名字是Hbuilder的app （基座）

现在你可以点进去，类似于打开app ，看效果

如果真机运行没有多大的问题，就可以打开apk了。

七、打包为apk

点击打包，弹出我这里先不管权限，点击“确认没有缺少权限，继续打包”

取消广告，继续打包

慢慢等待。提示打包成功，下载完成

点击图中 “打开下载目录” ，将apk文件发送到手机，我是利用QQ传到手机设备。

手机接收文件，下载了之后，安装。

在手机桌面上，就多了你的app

小菜鸟笔记，若有问题，欢迎批评指出，谢谢。

vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想 - 博客园相关推荐

2017 码云最火爆开源项目 TOP 50，你都用过哪些 – 坏~牧羊人 – 博客园
2017 码云最火爆开源项目 TOP 50,你都用过哪些本文转自:https://share.html5.qq.com/fx/u?r=JdjvzwC 2017 年度码云热门项目排行榜 TOP 50 ...
基于Cordova的博客园APP
背景: 自从今年下半年接触一个基于ReactJS 的手机APP项目.开始了解到了Corodva这个神奇的东西.后续自己也自作了一些小的APP放到了应用宝上.8月份开始想做一个博客园APP ...
Xamarin Android 打造属于自己的博客园APP（2）
好尴尬,隔了四个月才写第二篇幅,自己都不好意思了.这个拖延症好尴尬,妈蛋! 为那些在期待续集的同学说声sorry! 下面开始正文: 完成功能: 1.分页获取首页文章 2.分页获取精华文章 3.分页获取 ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包并且修改后不需要重新打包
如何让一个vue项目支持多语言(vue-i18n) 1.安装:npm install vue-i18n --save 2.在main.js中引入vue-i18n import VueI18n from ...
博客园app小项目有源码--在百度手机助手上线
这是一个基于博客园接口的app应用,自己花费了一段时间才完成,也算是自己第一个按照软件开发流程做的第一款比较像样子的android app应用,主要包括了: 1,需求分析 2,概要设计 3,接口分析 ...
基于Cordova的博客园三方App
一月前换了份工作,正式从.Net开发工程师转型到前端开发工程师, 目前公司主要是用Vue做web站点和Cordova+Vue做移动端App.趁着最近时间比较多.就想着用Cordova+Vue做一个博客 ...
重构博客园Android App
前言第一个全功能的非官方android客户端已经过去一年了...貌似已经不再更新的样子,最近发现,在android 4.1上运行的时候,列表不能滚动了..而且,原界面设计,也并不适合放在androi ...

vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想 - 博客园

vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想 - 博客园相关推荐

最新文章

热门文章