详解Vue webapp项目通过HBulider打包原生APP（vue+webpack+HBulider）

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

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

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

更改前：

更改后： 

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

然后配置图标

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

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

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

注：网上很多说自己的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了。

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

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

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

赞 (0)

相关推荐

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

    Vue webapp项目通过HBulider打包原生APP 1.webapp项目已经通过vue-cli搭建的脚手架写好了,然后通过webpack打包成一个部署文件list,如下: 2.打开HBulider,打开目录,选择这个list,项目名称自己更改.(或者直接新建一个app项目,然后把里边的unpackage和manifest这两个保留下来,其他的替换成自己dist文件里边的内容) 这个时候是web项目,需要改为APP项目(如果直接新建的app,请忽略此步) 更改前: 更改后:  3.在HB中

  • 详解Vue webapp项目通过HBulider打包原生APP（vue+webpack+HBulider）

    1.webapp项目已经通过vue-cli搭建的脚手架写好了,然后通过webpack打包成一个部署文件list,如下: 2.打开HBulider,打开目录,选择这个list,项目名称自己更改.(或者直接新建一个app项目,然后把里边的unpackage和manifest这两个保留下来,其他的替换成自己dist文件里边的内容) 这个时候是web项目,需要改为APP项目(如果直接新建的app,请忽略此步) 更改前: 更改后:  3.在HB中打开这个dist,可以看到有一个manifest.json的

  • 详解eclipse将项目打包成jar文件的两种方法及问题解决方法

    第一种:利用eclipse中自带的export功能 第一种方法分两种情况先来看第一种情况:没有引用外部jar的项目打包 步骤一:右键点击项目选择导出(export),选择java>jar文件(不是选择可运行jar文件) 步骤二:选择你要导出的项目以及文件,指定文件导出路径.连续点击两个下一步后到第四步. 步骤三:选择主类. 按照以上步骤即可完成对一个不引用外部jar项目的打包. 第二种情况:没有引用外部jar的项目打包 当我们引用了外部jar后,使用eclipse自带的export打包略显繁琐.

  • 详解DevEco Studio项目构建讲解、编写页面、布局介绍、页面跳转

    首先要知道鸿蒙的APP是怎么构成的?   HarmonyOS的应用软件包以APP Pack(Application Package)形式发布,它是由一个或多个HAP(HarmonyOS Ability Package)以及描述每个HAP属性的pack.info组成.HAP是Ability的部署包,HarmonyOS应用代码围绕Ability组件展开. 一个HAP是由代码.资源.第三方库及应用配置文件组成的模块包,可分为entry和feature两种模块类型,如下图所示. 一.项目目录 首先来看一

  • 详解antd+react项目迁移vite的解决方案

    antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎不那么香了,为什么这么说呢,因为vite太快了.经过一段时间的尝试,决定在项目中把webpack替换成vite试试,遂写成本文分享给大家. Vite是什么 作为本文的主角,首先简单介绍一下vite这个构建工具,该工具是尤雨溪推出的[下一代前端开发和构建工具],vite其实也不是一个新的工具,早在一年

  • 详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)

    详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)

    前言 Excel功能强大,应用广泛.随着web应用的兴起和完善,用户的要求也越来越高.很多Excel的功能都搬到了sass里面.恨不得给他们做个Excel出来...程序员太难了... 去年我遇到了一个甘特图的需求,做了很多工作,也写了两篇博客.一篇是用 GSTC 这个包做的甘特图,另一篇是自己手写了一个简易的甘特图.两个的效果都不理想,特别是GSTC,问题很多,好多道友看了博客遇到了问题,惭愧,没能帮大家解决这个问题.之前太忙了,这个甘特图就再没搞,直到今天发现了新的包,几乎是完全符合我们的需求

  • 详解C 语言项目中.h文件和.c文件的关系

    详解C 语言项目中.h文件和.c文件的关系 在编译器只认识.c(.cpp))文件,而不知道.h是何物的年代,那时的人们写了很多的.c(.cpp)文件,渐渐地,人们发现在很多.c(.cpp)文件中的声明语句就是相同的,但他们却不得不一个字一个字地重复地将这些内容敲入每个.c(.cpp)文件.但更为恐怖的是,当其中一个声明有变更时,就需要检查所有的.c(.cpp)文件. 于是人们将重复的部分提取出来,放在一个新文件里,然后在需要的.c(.cpp)文件中敲入#include XXXX这样的语句.这样即

  • 详解Angular5/Angular6项目如何添加热更新(HMR)功能

    本文介绍了详解Angular5/Angular6项目如何添加热更新(HMR)功能,分享给大家,具体如下: A:什么是HMR? Q:HMR(热替换)用于在运行的应用程序中更新代码而不需要重建它.这将导致更快的更新和更少的全页重新加载. angular6-hmr 提供angular6以上HMR(热更新)功能 步骤 1.进入angular项目父级目录内 git clone https://github.com/staven630/angular6-hmr angular6-hmr目录与angular项

  • 浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

    1.打包项目 期间遇到的坑,提前说下,避免重复工作. 1.1打包的app出现白屏. 出现原因:路径不对,需要改config\index.js 解决办法:修改打包的路径. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 出现原因:不能用history配置路由,要用hash 解决办法:修改路由mode属性为hash. 1.3.点手机物理按钮,直接退出程序. 出现原因:无理返回键直接用监听不到路由,会直接退出程序. 解决办法:可以引入mui,就能正常使用了. 1.

  • 详解如何将c语言文件打包成exe可执行程序

    详解如何将c语言文件打包成exe可执行程序

    如何将编写的c语言程序打包成exe可执行文件呢? 以前我们写程序很多是在编辑器上,让编辑起来编译运行我们的程序.如果想将其打包成exe可执行文件该如何做? 我这里推荐使用codeBlocks的gcc命令,因为比较简单.像vs这种编辑器就像是一把屠龙刀.功能过于复杂,需要注意的很多. 如何适用codeBlock的gcc命令呢? 我们来认识gcc命令是什么?gcc包括c和c++编译器 gcc和cc是一样的,c++和g++是一样的,一般c程序就用gcc编译,c++程序就用g++编译. 我们用gcc命令

随机推荐