vue-webpack.config使用七牛云cdn镜像加速

1. 配置cdn地址

在config目录下创建 app.config.js

module.exports = {//配置cdncdn:{host:'http://xxxxx.clouddn.com/',//七牛云镜像地址bucket:'vue-xxx',//空间名ak:'xxx',//秘钥sk:'xxx',}
}

2.安装七牛云sdk

npm i qiniu -D

3. 创建upload.js

位置可以随意,我是放置在跟webpack同级目录下

//引入qiniu ,fs ,path
let qiniu = require('qiniu');
let fs = require('fs');
let path = require('path');//引入配置的cdn
let cdnConfig = require('../config/app.config').cdn;
let {ak,sk,bucket} = cdnConfiglet mac = new  qiniu.auth.digest.Mac(ak,sk)
let config = new qiniu.conf.Config()
config.zone = qiniu.zone.Zone_z0; //区域代码//真正的上传方法
let doUpload = (key,file) => {let  options = {scope:bucket + ':' + key}let fromUploader = new qiniu.form_up.FormUploader(config)let putExtra = new qiniu.form_up.PutExtra()let putPolicy = new qiniu.rs.PutPolicy(options)let uploadToken = putPolicy.uploadToken(mac)return new Promise((resolve,reject )=>{fromUploader.putFile(uploadToken,key,file,putExtra,(err,body,info)=>{if(err){return reject(err)}if(info.statusCode === 200){resolve(body)}else {reject(body)}})})}//上传的文件夹,递归上传,上传的打包后的文件,如要上传本地的public文件将文件夹定位到"/public"
let filePaths = path.join(__dirname,"../dist")let uploadAll = (dir,prefix) => {let files = fs.readdirSync(dir)files.forEach(file => {let filePath = path.join(dir,file)//判断是路径还是文件,拼接路径const key = prefix ? `${prefix}/${file}` : fileif(fs.lstatSync(filePath).isDirectory()){return uploadAll(filePath,key)}doUpload(key,filePath).then(resp =>console.log(resp,"res")).catch(err => console.log(err,"err"))})
}
//调用上传接口
uploadAll(filePaths)

4. 在index.js 中更改 build 的assetsPublicPath配置

assetsPublicPath打包配置"/",或者"./"更改到cdn.host地址
对应到webpack.base.conf.js配置中的publicPath

5. package.json配置打包上传

 //直接运行npm run build "build": "node build/build.js && npm rum upload",//上传非打包后或者是已经打包的文件再上传 npm run upload"upload": "node build/upload.js"

6. 打包后的文件在本地测试

1.在本地创建 myExpressProject文件夹
cmd进入文件夹,搭建express本地服务器,安装express-generator生成器

npm install express-generator -g
2.创建express项目
express myRunProject
cd myRunProject
3.安装依赖
npm install
4.项目目录

5.将dist文件夹下的所有文件复制到express项目的public文件夹下面
6.启动express项目
npm start
7.访问浏览器 http://127.0.0.1:3000/
f12可查看静态文件访问路径是配置的七牛云地址

vue-webpack.config使用七牛云cdn镜像加速相关推荐

WordPress 配置七牛云 CDN 具体操作
WordPress 配置七牛云 CDN 具体操作: 1. 前言前段时间突发奇想把原先挂再 Coding 上的 Hexo 博客迁到部署在阿里云上的 WordPress ,反正阿里云送的服务器闲着也是闲 ...
将 laravel 项目内静态文件，css、js、images 部署到七牛云 CDN
项目升级,打算把 public 目录下的 css.js.image等文件,上传到七牛云,一直想搞来着,今天又想起来,正好 laravel 也从 5.2 升级到了 5.7,接下来把这边一搞,项目就更加优 ...
java七牛云图片压缩_七牛云 CDN 历史图片批量压缩
背景最近七牛云 CDN 的流量有点吃不消了,后台看了下统计,发现有好多图片文件特别大,最大的单个文件能到 10M 多 .所以就想做一下图片瘦身处理,官方自带的瘦身试了下效果一般,所以就不如自动动手了 ...
如何用建木CI更新七牛云CDN证书
上一次已经分享了如何利用建木CI快速的将文件上传到七牛云存储库,有的小伙伴表示还不够刺激.并且还发现生成的资源外链全是七牛家的域名,说这样显得太low了.可不可以把链接改成自己的域名呢?答案是肯定可以 ...
Wordpress搭载七牛云CDN图片不显示问题解决
前言我的博客https://www.erosripe.com使用wordpress搭建七牛云cdn直接一直显示不出来图片显示不出来图片解决方案 1.七牛云创建存储空间进行域名绑定时一定要使用htt ...
阿里云域名申请 + 七牛云CDN加速
为了让我的网站柚子烧酒图片加载更顺畅,所以想用七牛云做图床,结果从买域名到认证到备案再到绑定域名设置CDN加速,花了我快两周-网上似乎没有一全套傻瓜式教程,所以我就记录一下我的全部过程,仅供参考哈 ...
开启七牛云CDN免费HTTPS支持
效果图准备工作约定 assets.xx.com 作为你的自有域名,作为图片源站(七牛云CDN会从这里取原图) 约定 cdn.xx.com 作为对外显示的cdn图片网址域名,先不解析自行开启 ht ...
七牛云-CDN常见问题
CDN常见问题总结源站域名可以和加速域名一致么? 不可以源站类型为域名时,源站域名不允许和加速域名相同: 因为 cname记录和 A记录会冲突,不能配置同一个主机记录: CDN对于加速内容文件 ...
Laravel-七牛上传七牛云CDN问题
啰嗦一句-好久没有写博客了...今天抽空来一发这段时间,腾讯云服务器图片上传七牛云无法成功,老是超时,导致很多文章的内容无法正常显示,算是个大bug.同样的方法本地上传图片炒鸡快,问题是腾讯云还是七 ...

vue-webpack.config使用七牛云cdn镜像加速

1. 配置cdn地址

2.安装七牛云sdk

3. 创建upload.js

4. 在index.js 中更改 build 的assetsPublicPath配置

5. package.json配置打包上传

6. 打包后的文件在本地测试

vue-webpack.config使用七牛云cdn镜像加速相关推荐

最新文章

热门文章