利用HBuilderX将vue项目打包成app

准备开发工具

开发工具:HBuilderX
官网地址
(标准版需要自己安装插件,app开发版已经把app开发常用的插件安装好了,开箱即用,建议使用开发版)

新建项目

选择新建–>项目–>5+App–>点击创建
利用HBuilderX将vue项目打包成app_第1张图片
创建完成后你的图标会变成下面这种:5+的图标
在这里插入图片描述

创建完成后会出现这些文件和文件夹
其中css,img和js文件都是可以修改的
利用HBuilderX将vue项目打包成app_第2张图片
unpackage文件是存放APP图标的,可以通过后面的配置自动生成
index文件是我们的入口文件
manifest.json是打包成APP的配置文件
我们打包后生成的dist文件夹内的文件都会放到这里

将打包后的项目文件放入新建的5+APP的项目中

这是vue项目打包后生成的dist文件夹内的文件,将这些文件放入我们刚刚建立的项目目录内
利用HBuilderX将vue项目打包成app_第3张图片
将上面的文件放入我们新建的testapp文件夹内

利用HBuilderX将vue项目打包成app_第4张图片
删除无用的文件
利用HBuilderX将vue项目打包成app_第5张图片
利用HBuilderX将vue项目打包成app_第6张图片

配置

点击manifest.json进行配置
利用HBuilderX将vue项目打包成app_第7张图片
图标配置
利用HBuilderX将vue项目打包成app_第8张图片
启动图配置

利用HBuilderX将vue项目打包成app_第9张图片
其他默认配置
利用HBuilderX将vue项目打包成app_第10张图片
沉浸模式的配置:在下图位置添加下面的代码

 "statusbar": { //应用可视区域到系统状态栏下透明显示效果
            "immersed": true
        },

利用HBuilderX将vue项目打包成app_第11张图片

发行

选择发行–>原生app打包–>使用DCloud公用证书
利用HBuilderX将vue项目打包成app_第12张图片
点击打包–>打包成功后会自动返回下载链接(这会需要一些时间等待返回)利用HBuilderX将vue项目打包成app_第13张图片
打包成功
利用HBuilderX将vue项目打包成app_第14张图片

复制返回的链接到浏览器然后选择普通下载就能下载到手机上了

你可能感兴趣的:(vue)