APICloud 如何把项目打包成app

这是我参与更文挑战的第14天，活动详情查看： 更文挑战

前言

最近翻了一下之前学习Vue的笔记，主要介绍是项目完成后打包成一个app，就此记录一下学习过程。仅限于记录APICloud的使用过程。本例使用的是Vue项目。

准备工作

vue-cli4 打包

  1、删除路由的hisotry模式
  2、保证vue项目没有任何vue抛出的警告或者错误
  3、去除所有console.log()语句 （全局搜索用正则替换为空即可，正则：console.log\(.*\);?）
  4、在根目录下创建vue.config.js, 写入 module.exports = {publicPath: './'}

确保打包的过程要没有报错，有问题就解决，不要到后面出现问题了才解决。那时就是大问题了。
复制代码

实现过程

1、npm run build 打包项目，会产生一个dist文件夹。要保证打包出来的index.html能直接在本地打开。不然后续可能会出现问题。后续也需要用到里面打包生成的文件。如图：

2、打包工具可以去APICloud官网下载。本人用的是sublime text3 进行打包压缩。要为sublime text3 安装 Sublime-APICloud-Loader 插件，不会的小伙伴自行去官网或搜索引擎找答案，此处省略。安装成功后重启软件才会生效，然后新建一个文件夹做准备

然后右键鼠标会出现红色框的选项

3、右键新建APICloud选项，选择空白应用，然后给项目起名字，就会产生一个新文件夹。

接下来把其他的文件删掉，只留下config.xml一个文件就够了

4、前往APICloud官网注册账号 www.apicloud.com/

4.1 注册好账号登录就会来到这样一个页面

4.2 选择创建应用，选择Natice App 填好信息点击创建

4.3 就会来到一个这样的页面，就表示创建应用成功了。

5、接下来我们需要操作的步骤如下图

5.1、第一步：端设置 ， 进行相应的设置，上传图片，只支持png格式，具体可以看说明。

5.2、第二步：证书 点击一键创建证书（填好对应信息），可以根据自己想要的系统进行创建相对应的证书(Android 或者 IOS)

注： IOS的得在苹果电脑上操作，不然是弄不了的。后面生成的APP安卓手机不能装苹果证书生成的，苹果手机也不能装安卓证书生成的。

5.3 代码 —- 先让我们回到sublime text 3，对打包好的项目进行压缩 ，把项目打包好的文件复制到刚刚删下只剩下config.xml的文件夹里

压缩前我们先修改config.xml的信息，id 要改成你刚刚创建应用的那个id (可以在概览中找到应用的相关信息) 。id要对应，不然是不行的。只修改id就可以了，其他不用动。保存！退出！

修改好id信息之后，接下来就可以创建压缩包，右键当前文件夹，选择压缩Widget包，然后就会产生一个同名的压缩包

现在让我们目光回到APICloud上，点击上传代码，选择刚刚生成的 同名压缩包

上传成功后会有相对应的日志产生

6、模块 —- 可以根据自己的需求选择，不过一般不使用，默认就好，因为在开发中肯定用的是第三方的插件什么的，我这里是默认，没有选择其他的模块

7、云编译 —- 没什么复杂步骤，填好信息即可

选择类型 测试版 和 正式版 都可以，正式版的话最好是可以上架到应用商店的，但是要企业认证才能上架，个人开发者是不行的。这里需要提个醒。

8、编译 —- 最后激动人心的时刻到了，点击上面那个大大的云编译按钮 就会显示编译中。然后就静静祈祷不会报错吧！！！

那一但出现编译失败报错怎么办？重头到尾重新操作一遍即可，错误都会有对应的提示。

如果没有报错就会出现编译成功，会生成一个二维码，可以扫码下载打包好的APP安装到手机上啦！

编译之后如果修改了，继续编译就好。就会出现如下图的版本号，编译一次就会加一。

最后大家下载安装就好。就会发现app的名字就跟上面填的信息一样。我的叫 I知乎 ，是仿知乎日报的一个项目。

总结

总的来说都没有什么比较复杂的操作步骤，认认真真填完信息，按步骤操作，一般都不会有问题。

遇到问题可以查看文档进行学习来解决自己的疑惑 –>新手开发指南