使用HBuilderX将vue或H5项目打包app

好久没有搞过将vue项目打包成app了，这两天刚好项目需要将vue开发的H5项目打包成APP，那就简单记录一次呗（之前也写过一篇打包app，是将项目使用hbuilder打开，转为webapp什么的，就可以直接打包了，现在不一样了，现在使用HBuilderX还是有些区别）。

第一步：我们将vue项目使用npm run build进行打包，打包后默认获得dist文件（如果是纯HTML网页等，可忽略此步骤）；

第二步：我们下载HBuilderX，可前往官网下载 https://www.dcloud.io/hbuilderx.html 下载好以后，打开并新建项目，选择 5+App 默认模板，如下图所示

第三步，我们打开新建项目的文件，如下图所示

第四步：我们打开vue打包后的dist文件，全选复制（快捷键 ctrl+a 接着 ctrl+c）

第五步：打开新建项目的文件目录，将刚才复制的文件粘贴进去，需全部覆盖（快捷键 ctrl+v），如下图所示

第六步：使用HBuilderX打开刚新建的项目，找到 manifest.json 进行配置（根据自身需求去配置）

第七步：点击上方菜单【发行】-【原生APP 云打包（或者本地打包APP）】，如下图所示，如果没有证书，就选公共测试证书即可

第八步：耐心等待打包完成即可，打包成功后apk会在项目中 \unpackage\release\apk 文件下

原文围观使用HBuilderX将vue或H5项目打包app好久没有搞过将vue项目打包成app了，这两天刚好项目需要将vue开发的H5项目打包成APP，那就简单记录一次呗（之前也写过一篇打包app，是将项目使用hbuilder打开，转为webapp什么的，就可以直接打包了，现在不一样了，现在使用HBuilderX还是有些区别）...,共享博客http://www.sharedbk.com/post/243.html

使用HBuilderX将vue或H5项目打包app相关推荐

vue.js 项目打包APP应用包
vue.js 项目打包APP应用在hbuilderx编辑器使用的,vue.js 项目打包APP应用创建一个vue.js项目,写好移动端 vue.js 框架,APP项目完成. 1.在config配置 ...
vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付
本文仅记录基于vue开发h5项目过程中使用支付宝和微信支付过程中的重点与槽点,仅为前端部分,如有疏漏不正之处,请于文末评论探讨.注意:标红部分灰常重要,仔细阅读官方文档非常重要,耐心非常重要,细心非常 ...
vue做h5项目横屏
vue做h5项目横屏竖屏切换,主要叙述横屏样式逻辑是旋转页面就可以页面代码结构: <div class="widDiv"><div></div&g ...
【仅为记录】vue的H5项目在IOS上打开白屏问题
记录同事踩得一个坑,关于vue的H5项目在ios上白屏 ios上的H5应用打开是一片白屏,说实话刚遇到的时候真是麻了,恨不得给所有测试人都买一部安卓机(bushi) 上网搜了下,最后解决问题的,是在初 ...
vue移动端项目打包成app
这几天我做了一个vue移动端的小项目就想着打包成 app安装在手机上看看我就讲解下整个思路和过程首先项目开发完之后 (我使用的是vue-cli 3.*版本) 在项目文件夹下创建一个 vue. ...
vue项目打包App
本地的vue项目打包成App.这里以Hbuilder为例.首选命令行进入项目的目录执行 npm run build 打包成功之后再项目下回生成一个dlist 文件夹.在Hbuilder中导入dlis ...
vue 搭建H5项目及适配
1.创建项目 vue create test (项目名称) vue2完整创建流程 2.进行H5适配 2.1 选择ui框架(以vantui 为例) 具体 ...
围观，听说你用Vue写H5项目了？
没错,我用Vue写了一个H5项目,来看下我踩坑记录吧. 1.按需引入在开发过程中,会遇到很多五花八门的库.其实这些库中有很多功能/模块是用不到的,所以,这里推荐按需引入: import { Slid ...
超简单！H5项目套APP外壳
下载HBuilder 官网:http://www.dcloud.io/ (1)下载成功后邮箱注册登录 (2)文件->新建->移动App (3)创建成功后得到这样一个目录结构,manife ...

使用HBuilderX将vue或H5项目打包app

使用HBuilderX将vue或H5项目打包app相关推荐

最新文章

热门文章