vueJs项目打包成移动端安装包（vue项目打包成windows应用）

在日常开发中，我们的应用场景越来越多元化，使用vueJs开发的项目可以应用在企业微信微应用、微信公众号、钉钉自建应用等等，上面这些都是基于第三方平台而使用，下面介绍一下如何使用HBuilder X将vueJs工程打包成独立安装包，应用在移动设备中，包括智能手机、平板、PDA等。

1. 打开HbuilderX官网，下载并安装软件。https://dcloud.io/hbuilderx.html

2. 安装完成后打开软件，依次选择文件-->新建-->项目，如下图所示。然后选择5+App，输入项目名称，选择存放路径，模板选择默认即可，最后点击创建。

3. 创建好后，目录结构如下，css、js、img目录为静态资源目录，unpackage为打包目录，mainfest.json为移动应用的配置文件，双击mainfest.json打开后进行基础配置。

4. AppID为应用标识，保持默认，一般不建议重新获取，防止对已安装的应用造成重新安装失败、热更新失败等影响。应用名称即安装后的名称，根据实际需要自行修改。大小版本号同名称一样，根据实际情况修改。

点击图标配置，选择原文件，自动自成应用图标。

启动界面根据需求配置，这里不做介绍。

模块配置中，在应用所需的基础模块上打勾即可，如果是使用定位模块还需要百度地图、高德地图对应的appKey。

权限配置中，同样勾选我们应用中所需要的权限，否则会导致我们的部分应用功能失效。

App常用其它配置正常情况下保持默认即可，也可根据需求做对应修改。

5. 上述内容为应用配置，完成之后我们首先对vueJs项目进行打包，执行npmrunbuild脚本，打包后将dist（默认）目录中生成的文件拷贝到5+App项目的根目录中（可以编写脚本，build完成后自动将文件覆盖到目标目录中），接着在菜单栏中选择发行-->原生App-云打包。

在弹出的界面中输入Android包名，也可不修改。选择应用证书，这里只做演示所以选择公测证书，其他按需配置。点击tab页切换到ios设置，选择profile文件和私钥证书，输入对应的密码，点击打包按钮，随后在Hbuilder控制台中能看到打包信息，打包完成后会有提示，最后在unpackage目录中找到打包后的安装包。

Android安装包打包成功，在设备上安装即可。

6. 安卓包生成后接着我们处理ios安装包，首先我们需要在蒲公英平台注册账号，https://www.pgyer.com/。登录后在上方点击发布按钮，在页面中上传刚刚打包好的ipa文件，点击发布应用。在苹果手机中输入应用地址或者扫描二维码下载应用安装包，在手机设置中选择信用该证书即可使用App，在蒲公英管理后台中点击应用管理即可查看发布的应用信息，如下图所示。

至此，基于vueJs开发的项目打包成移动应用安装包已经全部完成，虽说过程有点小复杂，但是对于没有特殊需求的应用来说，节省了一定的开发成本，毕竟基于vue的开发省去了android和ios开发带来的时间和人力成本，同理基于react开发的项目也适用此套方案。