小程序靜態資源無縫轉移到騰訊雲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圖片除外）。

  是否是方便多了？

  趕忙在你項目用上把！