一、准备开发工具

开发工具：HBuilderX

官网地址：http://www.dcloud.io

（标准版需要自己安装插件，app开发版已经把app开发常用的插件安装好了，开箱即用，建议使用开发版）

二、打包生成一个vue项目

就拿手头上一个vue项目进行打包，vue项目预览如下：

打包生成的项目结构：

三、创建HBuilder的app项目

（请先注册HBuilde账号并登录，打包的时候需要登录，并获取应用识别AppID）

创建完后会看到以下结构：

其中css、img、js文件夹换成打包后的static，index.html换成打包后的index.html。

Unpackage是用来放置app图标等app文件的，index.html是app入口，manifest.json是用来打包成app的配置文件。

替换完后，变成以下目录结构：

四、配置manifest.json

点击manifest.json会打开配置页面。

1、基础配置：

①：应用识别AppID：云端获取，需要注册并登录

②：应用名称、版本、版本号等设置按说明填写即可

2、图标配置：设置app图标，上传完图片后，点击自动生成所有图标并替换，如下：

3、启动图配置：

不显示等待雪花

设置安卓启动图片

4、SDK配置：根据项目使用情况填写

5、模块权限配置：根据项目使用情况填写

6、源码视图：略

五、进行打包

以上配置完成后，就可以进行打包App了。点击发行，选择原生App-云打包，会弹出云打包弹框：

1、暂时只打包安卓，所以只勾选安卓

2、如果没有自有证书，就选择使用DCloud公用证书

3、不勾选广告联盟和换量联盟

如下：

点击打包即可。

提交完后，留意HBuilderX控制台信息

点击下载链接下载安装包就可以了。

使用HBuilderX实现打包vue项目成app的更多相关文章

  1. cordava打包vue项目成app

    注意:安装目录不要以中文命名 1.安装cordova :npm install -g cordova 2.安装java jdk :配置环境变量: 1.系统变量:名:JAVA_HOME    值:C:\ ...

  2. 用HBuilderX 打包 vue 项目 为 App 的步骤

    首先打包你的 vue 项目 生成 dist 文件夹,教程请移步  https://www.cnblogs.com/taohuaya/p/10256670.html 看完上面的教程,请确保 你是 将: ...

  3. 使用Cordova打包Vue项目

    因为公司项目要求, 原本的vue移动端项目, 现在要求能使用定位, 调用摄像头等功能, 并且开发成混合APP. 一个小白的孤军奋战史, 记录一下, 以备后用.... 第一步: 安装cordova 在命 ...

  4. 教你用Cordova打包Vue项目

    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...

  5. 使用electron-packager electron-builder electron-updater 打包vue项目，支持在线更新

    1.如何用electron-packager electron-builder打包vue项目,打包成桌面程序. 步骤一. 执行npm run build 打包你的vue项目. 打包成功后,生成dist ...

  6. electron打包vue项目

    electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并 ...

  7. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  8. nw打包vue项目 安装包

    接着上篇nw打包vue项目exe中: copy /b nw.exe+dome.nw dome.exe 出现了dome.exe文件之后,要是打算打包成为安装包,网上推荐的是Inno Setup Comp ...

  9. docker 运行jenkins及vue项目与springboot项目(三.jenkins的使用及自动打包vue项目)

    docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...

随机推荐

  1. METAL渲染是什么？

    METAL渲染是什么? Metal渲染是由苹果公司为iOS8以及更新版本开发的全新的底层渲染API.它侧重于减少GPU驱动的工作量,从而当Metal调用时,CPU的消耗将降至最低.这样一来,游戏就可以 ...

  2. Android SDK Manager检查更新时遇到Failed to fetch URL xxxxxxx reason: Connection to xxxxxx的错误的解决办法!

    首先说明的是这个问题并不是每个人都存在,但是我和我的一个同学都有这种情况,所以我同学百度了一下,找出了解决办法. 问题描述: 使用Android SDK Manager检查在线更新,提示以下错误: & ...

  3. tar、tgz、gz文件批量解压方法

    我是用for i in $(ls *.tgz);do tar xvf $i;done 批量解压的tgz文件的我是用for i in $(ls *.gz);do gzip -d $i;done批量解压的 ...

  4. CloudStack 4.1快照测试

    目前4.1只支持存储快照,4.2能支持内快照 1. 选中实例 2. 查看实例卷 3. 创建快照 4. 通过快照创建模板 5. 查看通过快照创建的模板 6. 通过快照创建模板生成的实例 7. 自动定制创 ...

  5. 不同包之间的继承extends

    情景如下: 两个类:ExtendsSuper(父类).ExtendsSub(子类) 两个包:父类ExtendsSuper位于包packSuper路径下,子类ExtendsSub位于包packSub路径 ...

  6. RNA -seq

    RNA -seq RNA-seq目的.用处::可以帮助我们了解,各种比较条件下,所有基因的表达情况的差异. 比如:正常组织和肿瘤组织的之间的差异:检测药物治疗前后,基因表达的差异:检测发育过程中,不同 ...

  7. 训练超参数， 出现 Cannot use GPU in CPU-only Caffe 错误？

    当我们用MNIST手写体数字数据库和LeNet CNN 模型训练超参数,运行 examples/mnist/train_lenet.sh是出现Cannot use GPU in CPU-only Ca ...

  8. Facebook对MySQL全表扫描性能的改进

    原文博客如下: http://yoshinorimatsunobu.blogspot.com/2013/10/making-full-table-scan-10x-faster-in.html 如下是 ...

  9. Ubuntu下的apache2的配置过程

    参考apache2的中文文档:http://httpd.apache.org/docs/2.4/ 安装apache2: apt-get install apache2 安装apache2doc文档:a ...

  10. iptables命令（备忘）

    语法 iptables(选项)(参数) 选项 -t<表>:指定要操纵的表: -A:向规则链中添加条目: -D:从规则链中删除条目: -i:向规则链中插入条目: -R:替换规则链中的条目: ...