小程序靜態資源無縫轉移到騰訊雲COS 使用wepy mpvue 等webpack打包的小程序項目

原文鏈接：https://callmesoul.cn/xiao-cheng-xu-jing-tai-zi-yuan-wu-feng-zhuan-yi-dao-teng-xun-yun-cos-shi-yong-wepy-mpvue-deng-webpackda-bao-de-xiao-cheng-xu-xiang-mu/

今天介紹的工具是wecos

• 原生小程序

原生的小程序直接根據wecos的文章操作即可，wecos提供了上傳本地資源文件到cos、替換小程序的引用本地路徑爲上傳路徑等。

這裏不作詳細說明，主要介紹webpack打包的小程序項目。

因爲原生寫起來很不方便。

• webpack小程序打包項目

  最好是開發完再來進行這一步，前期專心開發。

  我前期開發時，引用靜態資源用的是相對路徑，用的絕對路徑應該也可以的。

  項目開發完後

  1. webpack設置打包後的cdn地址, webpack rules選項：

     {
             test: /\.(png|jpg|jpeg|gif|svg)$/,
             use: {
               loader: 'file-loader',
               options: {
                 name: '/[path][name].[ext]',
                 publicPath: function (file) {
                   if(isProduction){//判斷是否生產環境，自己判斷咯。
                     if(file.indexOf('tabbar')>=0){//如果有tabbar的，tabbar用一個tabbar的文件夾裝起來，因爲tabbar圖片只支持本地。
                       return file;
                     }
                     else{
                       return 'https://xxx-1234567.cos.ap-guangzhou.myqcloud.com/'+file;//你的騰訊雲cos bucket的域名。
                     }
                   }else{
                     return file;
                   }
                 }
               }
             },
           },

  2. 安裝wecos

     npm install -g wecos

  3. 跟目錄創建wecos.config.json文件

  4. 填寫wecos.config.json 配置

     {
       "appDir": "./dist/assets",
       "cos": {
         "secret_id": "xxxxx",
         "secret_key": "xxxxx",
         "bucket": "xxx-1234567",//bucker-appid
         "region": "ap-guangzhou", //創建 bucket 時選擇的地域簡稱
         "folder": "/assets" //資源存放在 bucket 的哪個目錄下
       },
       "uploadFileSuffix": [".jpg",".png",".gif",".webp",".svg"],
       "uploadFileBlackList": [//不上傳的圖片，填tabbar的目錄
         "./dist/assets/images/tabbar",
       ]
     }

  5. 在根目錄運行wecos即可。

• 總結

• 爲什麼不用webpack的 publicPath 而用file-loader的publicPath ？

  因爲webpack的 publicPath只支持字符串，一但改成線上域名，所有靜態資源的前綴都會變成cdn域名。而小城的tabbar並不支持網絡圖片，base64也不支持，只支持本地圖片。

  這時我們就用file-loader的publicPath ，支持函數且返回文件名，可以寫條件去過濾掉tabbar的文件。

  使tabbar文件使用本地的，而其他使用線上cdn域名的文件。

• 爲什麼要用wecos？

  當然你也可以不用自己，本地打包後自己手動上傳到cos後臺。

  然後刪除了本地的圖片文件（除了tabbar的圖片）。

  然後開發者工具再上傳代碼。

  你會發現這步驟很累贅。

  使用wecos後，我們打包後只需要跑一下cos就可以自動上傳本地的上cdn，且自動刪除本地的（tabbar圖片除外）。

  是不是方便多了？

  趕緊在你項目用上把！