准备开发工具

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

新建项目

选择新建–>项目–>5+App–>点击创建

vue view项目怎么打包成ios 如何将vue项目打包成app_vue view项目怎么打包成ios


创建完成后你的图标会变成下面这种:5+的图标

vue view项目怎么打包成ios 如何将vue项目打包成app_vue view项目怎么打包成ios_02

创建完成后会出现这些文件和文件夹

其中css,img和js文件都是可以修改的

vue view项目怎么打包成ios 如何将vue项目打包成app_json_03


unpackage文件是存放APP图标的,可以通过后面的配置自动生成

index文件是我们的入口文件

manifest.json是打包成APP的配置文件

我们打包后生成的dist文件夹内的文件都会放到这里

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

这是vue项目打包后生成的dist文件夹内的文件,将这些文件放入我们刚刚建立的项目目录内

vue view项目怎么打包成ios 如何将vue项目打包成app_vue view项目怎么打包成ios_04


将上面的文件放入我们新建的testapp文件夹内

vue view项目怎么打包成ios 如何将vue项目打包成app_json_05


删除无用的文件

vue view项目怎么打包成ios 如何将vue项目打包成app_json_06


vue view项目怎么打包成ios 如何将vue项目打包成app_vue view项目怎么打包成ios_07

配置

点击manifest.json进行配置

vue view项目怎么打包成ios 如何将vue项目打包成app_开发工具_08


图标配置

vue view项目怎么打包成ios 如何将vue项目打包成app_app开发_09


启动图配置

vue view项目怎么打包成ios 如何将vue项目打包成app_vue view项目怎么打包成ios_10


其他默认配置

vue view项目怎么打包成ios 如何将vue项目打包成app_开发工具_11


沉浸模式的配置:在下图位置添加下面的代码

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

vue view项目怎么打包成ios 如何将vue项目打包成app_vue view项目怎么打包成ios_12

发行

选择发行–>原生app打包–>使用DCloud公用证书

vue view项目怎么打包成ios 如何将vue项目打包成app_开发工具_13


点击打包–>打包成功后会自动返回下载链接(这会需要一些时间等待返回)

vue view项目怎么打包成ios 如何将vue项目打包成app_app开发_14


打包成功

vue view项目怎么打包成ios 如何将vue项目打包成app_app开发_15

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