亲测用APICloud打包vue项目

准备工作：

1.去APICloud官网下载打包工具
https://www.apicloud.com/devtools
我使用的是第三款（Eclipse APICloud Plugins(Studio 1)）
2.APICloud的账号肯定要自己注册一个啦
登录后进入开发控制台
在这里插入图片描述
3.然后创建一个app应用
4.登录你下载的Eclipse APICloud Plugins(Studio 1)，需要输入你的账号和密码，用来同步提交你的代码
5.进入后的界面

6.将自己创建的app（我的是菜鸟登陆）引入到本地

7.然后点击我的app项目
在这里插入图片描述
8.打开外部资源位置

9.外部资源位置

10.vue生成dist文件之前还需如下操作

vue项目中需要做如下配置，config/index.js中需要把build的assetsPublicPath属性由原来的 / 改成 ./
在这里插入图片描述
index.html添加一些代码用于处理物理返回键：
下面的代码添加在index.html中，
<body> <div id="app"></div> 的下面

<!--引用apicloud的脚本-->
<script src="script/api.js"></script>
<script>
 //这里处理物理返回键，避免打包后点击一次直接退出应用
 window.apiready = function () {
   var timer = 0
   api.addEventListener({
     name: 'keyback'
   }, function (ret, err) {
     var currentTime = +new Date()
     api.historyBack(function (ret, err) {
       if (!ret.status) {
         if ((currentTime - timer) > 2000) {
           timer = currentTime
           api.toast({
             msg: '再按一次返回键退出app',
             duration: 2000,
             location: 'bottom'
           })
         } else {
           api.closeWidget({
             id: 'A6089289836112', //这里改成自己的应用ID
             retData: {name: 'closeWidget'},
             silent: true
           })
         }
       }
     })
   })
 }
</script>

这样打包以后代码还存在index.html里，引用脚本的路径也是apicloud目录下的。

11.这个时候再打包vue项目，生成dist文件。之后把dist目录下的文件复制过去覆盖原文件就行了。如此一来原文件只是多了一个static文件（里面装的是vue中打包的css和js文件）
在这里插入图片描述
12.用svn提交修改过的代码

13.新添加的文件需要svn–add一下，再提交
14.同步完成之后，进入打包环节