一、准备开发工具

开发工具: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. 对象转换利器之Dozer

    什么是Dozer Dozer是一个Java对象转换工具,可以在JavaBean和JavaBean之间进行递归数据复制,并且适应不同复杂的类型.Dozer会直接将名称相同的属性进行复制,属性名不同或者有 ...

  2. Python爬虫进阶五之多线程的用法

    前言 我们之前写的爬虫都是单个线程的?这怎么够?一旦一个地方卡到不动了,那不就永远等待下去了?为此我们可以使用多线程或者多进程来处理. 首先声明一点! 多线程和多进程是不一样的!一个是 thread ...

  3. 京东应用架构设计ppt阅读总结

    (一)架构设计原则总结: 1.架构愿景:高可用性.高可扩展性.低成本.多快好省(高时效.高人效.低成本) 2.业务架构设计原则:基础业务下沉抽象成平台.核心业务非核心业务分离.隔离不同类型的业务.主流 ...

  4. Sypder 安装和使用

    一.安装Spyder 我傻傻以为直接下载Spyder就可以用了,但我其实大错特错了.Spyder虽然提供科学计算,但是它还需要一个介于Python和其之间的框架,或者说,显示界面PyQt5.(PyQt ...

  5. 搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

    Web GIS系列: 搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 使用GeoServer+QGIS发布WMTS服务 使用GeoSe ...

  6. CString->char*.,char*->CString,char*->LPCTSTR

    CString->char* CString strSource;//宣告CString char* charSource; //宣告char* 法1: charSource = (char*) ...

  7. Modelsim设置数据以模拟波形显示

    选中希望以模拟波形显示的信号,右击选择format—>Analog(automatic) 如果你的数据是用无符号数表示一个完整的波形的,那么可能显示出来的波形样子是下面的样子,不过不要紧,这是因 ...

  8. Websocket出现的错误

    前端使用sockjs,后台使用spring的websocket框架 结果在一个网络较慢的地方,发现tomcat报错信息: Oct 28, 2015 10:10:43 AM org.apache.cat ...

  9. mdadm 软RAID

    mdadm是linux下用于创建和管理软件RAID的命令,是一个模式化命令.但由于现在服务器一般都带有RAID阵列卡,并且RAID阵列卡也很廉价,且由于软件RAID的自身缺陷(不能用作启动分区.使用C ...

  10. ffmpeg学习(二) 通过rtsp获取H264裸流并保存到mp4文件

    本篇将使用上节http://www.cnblogs.com/wenjingu/p/3977015.html中编译好的库文件通过rtsp获取网络上的h264裸流并保存到mp4文件中. 1.VS2010建 ...