// /scripts/upcdn.js const qiniu = require('qiniu') const glob = require('glob') const mime = require('mime') const path = require('path') const isWindow = /^win/.test(process.platform) let pre = path.resolve(__dirname, '../dist/') + (isWindow ? '\\' : '') const files = glob.sync( `${path.join( __dirname, '../dist/**/*.?(js|css|map|png|jpg|svg|woff|woff2|ttf|eot)' )}` ) pre = pre.replace(/\\/g, 'https://www.jb51.net/') const options = { scope: 'source' // 空间对象名称 } var config = { qiniu: { accessKey: '', // 个人中心 秘钥管理里的 AccessKey secretKey: '', // 个人中心 秘钥管理里的 SecretKey bucket: options.scope, domain: 'http://ply4cszel.bkt.clouddn.com' } } var accessKey = config.qiniu.accessKey var secretKey = config.qiniu.secretKey var mac = new qiniu.auth.digest.Mac(accessKey, secretKey) var putPolicy = new qiniu.rs.PutPolicy(options) var uploadToken = putPolicy.uploadToken(mac) var cf = new qiniu.conf.Config({ zone: qiniu.zone.Zone_z2 }) var formUploader = new qiniu.form_up.FormUploader(cf) async function uploadFileCDN (files) { files.map(async file => { const key = getFileKey(pre, file) try { await uploadFIle(key, file) console.log(`上传成功 key: ${key}`) } catch (err) { console.log('error', err) } }) } async function uploadFIle (key, localFile) { const extname = path.extname(localFile) const mimeName = mime.getType(extname) const putExtra = new qiniu.form_up.PutExtra({ mimeType: mimeName }) return new Promise((resolve, reject) => { formUploader.putFile(uploadToken, key, localFile, putExtra, function ( respErr, respBody, respInfo ) { if (respErr) { reject(respErr) } resolve({ respBody, respInfo }) }) }) } function getFileKey (pre, file) { if (file.indexOf(pre) > -1) { const key = file.split(pre)[1] return key.startsWith('https://www.jb51.net/') ? key.substring(1) : key } return file } (async () => { console.time('上传文件到cdn') await uploadFileCDN(files) console.timeEnd('上传文件到cdn') })()
修改 publicPath
修改 vue.config.js 的配置信息，让其 publicPath 指向我们 cdn 的域名
const IS_PROD = process.env.NODE_ENV === 'production' const cdnDomian = 'http://ply4cszel.bkt.clouddn.com' module.exports = { publicPath: IS_PROD ? cdnDomian : 'https://www.jb51.net/', // 省略其它代码 ······· }
修改package.json配置
修改package.json配置，使我们 build 完成后自动上传资源文件到 cdn服务器
"build": "vue-cli-service build --mode prod && node ./scripts/upcdn.js",
运行查看效果
npm run build
然后到你的 cdn
控制台的内容管理看看文件是否已经上传成功
8. docker部署
这边使用的是 centOS7 环境，不过使用的是不同的系统，可以参考一下其它系统的安装方法
8.1 安装docker 更新软件库
yum update -y
安装docker
yum install docker
启动docker服务
service docker start
安装docker-compose
// 安装epel源 yum install -y epel-release // 安装docker-compose yum install docker-compose
8.2 编写docker-compose.yaml