小程序静态资源无缝转移到腾讯云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图片除外）。

  是否是方便多了？

  赶忙在你项目用上把！