親測用APICloud打包vue項目

原創

2019-01-18 18:51

準備工作：

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.同步完成之後，進入打包環節