Vue webapp项目通过HBulider打包原生APP

1、webapp项目已经通过vue-cli搭建的脚手架写好了,然后通过webpack打包成一个部署文件list,如下:

详解Vue webapp项目通过HBulider打包原生APP

2、打开HBulider,打开目录,选择这个list,项目名称自己更改。(或者直接新建一个app项目,然后把里边的unpackage和manifest这两个保留下来,其他的替换成自己dist文件里边的内容)

详解Vue webapp项目通过HBulider打包原生APP

这个时候是web项目,需要改为APP项目(如果直接新建的app,请忽略此步)

详解Vue webapp项目通过HBulider打包原生APP

更改前:详解Vue webapp项目通过HBulider打包原生APP

更改后: 详解Vue webapp项目通过HBulider打包原生APP

3、在HB中打开这个dist,可以看到有一个manifest.json的文件。这个文件是用来配置应用信息的。入口文件一定要对应好,我用VUE写的单页应用,所以就一个index.html。

详解Vue webapp项目通过HBulider打包原生APP

然后配置图标

详解Vue webapp项目通过HBulider打包原生APP

按着自己项目的要求配置就行了,HB下面列举的很详细。

4、接下来可以通过手机用USB线与电脑连接进行真机调试。(必须通过USB线连接才可以,人家HB不支持什么通过无线连接的方式)windows电脑不用说了,可以用一些360助手什么的就可以解决了。如果你的手机是安卓的,在苹果电脑下面就没那么好搞了。后来通过百度加自己的摸索也搞出来。方法就是在苹果电脑上下载一个使用 Android File Transfer这个软件。要收费时,点击试用就可以了。手机上需要打开usb调试,然后选择 内置光盘 就可以与苹果电脑连接了。手机自己也有提示(真的很暖心)

详解Vue webapp项目通过HBulider打包原生APP

连接成功之后,就可以进行真机调试了。

详解Vue webapp项目通过HBulider打包原生APP

注:网上很多说自己的VUE项目项目打开一片空白,记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。

module.exports = {
 build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,

assetsPublicPath默认的是  ‘/'  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ '

另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。

// mode: 'history' // 默认hash

5、如果真机测试没有问题。那么就可以真正的进行打包成APP了。

详解Vue webapp项目通过HBulider打包原生APP

详解Vue webapp项目通过HBulider打包原生APP

详解Vue webapp项目通过HBulider打包原生APP

详解Vue webapp项目通过HBulider打包原生APP

详解Vue webapp项目通过HBulider打包原生APP

打包成功后,可以通过手动下载,或者直接打开下载目录里边下载好的。把这个xxxx.apk文件通过qq或者其他的发送到你的手机上,点击安装。就可以了。

6、最后,展示一下手机上的效果。

详解Vue webapp项目通过HBulider打包原生APP

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
vue,webpack,HBulider, vue,webpack打包

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“详解Vue webapp项目通过HBulider打包原生APP”

暂无“详解Vue webapp项目通过HBulider打包原生APP”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。