小程序静态资源无缝转移到腾讯云COS 使用wepy mpvue 等webpack打包的小程序项目
栏目: JavaScript · 发布时间: 5年前
内容简介:原生的小程序直接根据wecos的文章操作即可,wecos提供了上传本地资源文件到cos、替换小程序的引用本地路径为上传路径等。这里不作详细说明,主要介绍webpack打包的小程序项目。因为原生写起来很不方便。
今天介绍的 工具 是 wecos
-
原生小程序
原生的小程序直接根据wecos的文章操作即可,wecos提供了上传本地资源文件到cos、替换小程序的引用本地路径为上传路径等。
这里不作详细说明,主要介绍webpack打包的小程序项目。
因为原生写起来很不方便。
-
webpack小程序打包项目
最好是开发完再来进行这一步,前期专心开发。
我前期开发时,引用静态资源用的是相对路径,用的绝对路径应该也可以的。
项目开发完后
-
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; } } } }, },
-
安装
wecos
npm install -g wecos
-
跟目录创建
wecos.config.json
文件 -
填写
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", ] }
-
在根目录运行
wecos
即可。
-
-
总结
-
为什么不用
webpack
的publicPath
而用file-loader
的publicPath
?因为
webpack
的publicPath
只支持字符串,一但改成线上域名,所有静态资源的前缀都会变成cdn域名。而小城的tabbar并不支持网络图片,base64也不支持,只支持本地图片。这时我们就用
file-loader
的publicPath
,支持函数且返回文件名,可以写条件去过滤掉tabbar的文件。使tabbar文件使用本地的,而其他使用线上cdn域名的文件。
-
为什么要用
wecos
?当然你也可以不用自己,本地打包后自己手动上传到cos后台。
然后删除了本地的图片文件(除了tabbar的图片)。
然后开发者工具再上传代码。
你会发现这步骤很累赘。
使用
wecos
后,我们打包后只需要跑一下cos
就可以自动上传本地的上cdn,且自动删除本地的(tabbar图片除外)。是不是方便多了?
赶紧在你项目用上把!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 完美体验!在小程序中用Git无缝管理版本开发!
- Android 视频无缝切换2.0
- 漂亮~pandas可以无缝衔接Bokeh
- H5移动端获奖无缝滚动动画实现
- 进阶运维:SSH无缝切换远程加密
- 支持企业无缝上云,CynosDB应“云”而生
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。