天天看点

使用Hbuilder打包vue项目appvue项目, HBuilder / HBuilderX有的情况下

vue项目, HBuilder / HBuilderX有的情况下

第一步, 使用HBuilder创建一个app项目, 我使用的是HBuilderX, 步骤如下:

选择左上角, 文件, -> 新建 -> 项目 会出先这样的画面:

使用Hbuilder打包vue项目appvue项目, HBuilder / HBuilderX有的情况下

那么我们选择 5+App那个选项, 

使用Hbuilder打包vue项目appvue项目, HBuilder / HBuilderX有的情况下

这样我们就有一个基本的app模板了

然后我们在打包我们的vue项目, 使用npm run builder 方法打包,会生成dist文件夹

使用Hbuilder打包vue项目appvue项目, HBuilder / HBuilderX有的情况下

那么将这个文件夹内的东西, 不包括dist这个主文件夹, 复制到前面HBuilder创建好的app模板里面去, 会出现这样

使用Hbuilder打包vue项目appvue项目, HBuilder / HBuilderX有的情况下

我们选择将原本的index.html 也就是网页的入口文件, 给覆盖了, 使用我们自己的, 这样子目录就会是这样子的

使用Hbuilder打包vue项目appvue项目, HBuilder / HBuilderX有的情况下

使用的是vue项目打包号的index.html文件,

其他的详细参数是放在manifest.json文件中的, 点开他会出现这样

使用Hbuilder打包vue项目appvue项目, HBuilder / HBuilderX有的情况下

这里面有很多参数可以琢磨, 可以以后有时间了慢慢研究, 

那么接下来, 就是进行app打包操作了

我们选择菜单栏中的 发行 -> 原生app-云打包, 这样就可以打包了

点击之后, 会出现这样的画面

使用Hbuilder打包vue项目appvue项目, HBuilder / HBuilderX有的情况下

分为安卓和ios, 如果不要ios的直接将上面的ios取消, 

最终我的选择是这样的

使用Hbuilder打包vue项目appvue项目, HBuilder / HBuilderX有的情况下

就可以点击打包了

点击之后呢, 就是等待了

使用Hbuilder打包vue项目appvue项目, HBuilder / HBuilderX有的情况下

等待完成就可以下载了

使用Hbuilder打包vue项目appvue项目, HBuilder / HBuilderX有的情况下

这样一个app就完成啦, 是不是很方便啊!

继续阅读