vue打包上傳到阿里OSS

1,  引入ali-oss

npm i ali-oss --save

2，在build文件下創建uploadOSS.js

let OSS = require('ali-oss')

var fs = require('fs');

var delList = []

var bucket = ''
    if (process.env.env_config==='test') {
			bucket = 'testweb'
		} else  if (process.env.env_config==='sit') {
			bucket = 'web'
		} else {
			bucket = 'prodweb'
		}

let client = new OSS({
	region: 'oss-cn-shenzhen',
	accessKeyId: 'accessKeyId',
	accessKeySecret: 'accessKeySecret',
	bucket: bucket,
	timeout: '300s',  // 5分鐘
	secure: process.env.env_config==='test'?false:true   //(secure: true)則使用HTTPS，(secure: false)則使用HTTP
});

//判斷當前字符串是否以str結束
if (typeof String.prototype.endsWith != 'function') {
	String.prototype.endsWith = function (str){
		return this.slice(-str.length) == str;
	};
}

async function putOSS (src,dist) {
	try {
		let result = await client.put(dist, src);
		console.log(result);
	} catch (e) {
		console.log(e);
	}
}

/* 分片上傳 */
async function multipartUpload (src,dist) {
	try {
		let result = await client.multipartUpload(dist, src, {
			progress
		});
		console.log(result);
	} catch (e) {
		// 捕獲超時異常
		if (e.code === 'ConnectionTimeoutError') {
			console.log("Woops,超時啦!");
			// do ConnectionTimeoutError operation
		}
		console.log(e)
	}
}

/* 上傳進度顯示 */
const progress = async function (p) {
	console.log(p);
};

/* 刪除單個文件 */
async function delOSS (dist) {
	try {
		let result = await client.delete(dist);
		// console.log(result);
	} catch (e) {
		console.log(e);
	}
}

/* 批量刪除 */
async function deleteMulti (objList) {
	console.log('刪除數量：', objList.length)
	if (objList.length === 0) {
		return
	}
	try {
		let result = await client.deleteMulti(objList);
		console.log(result);
		objList = []
	} catch (e) {
		console.log(e);
	}
}

/* 獲取要添加的文件 */
async function addFiles(src, dist){
	var docs = fs.readdirSync(src);
	docs.forEach(function(doc){
		var _src = src + '/' + doc,
			_dist = dist + '/' + doc;
		var st = fs.statSync( _src);
		// 判斷是否爲文件
		if( st.isFile()&&doc!=='.DS_Store' ){
			if (_src.endsWith('.js')
				||_src.endsWith('.css')
				||_src.endsWith('.ttf')
				||_src.endsWith('.wof')
				||_src.endsWith('.png')
				||_src.endsWith('.ico')){
				multipartUpload(_src,_dist)
			}
			// console.log(_src+'是文件',_dist)
		}
		// 如果是目錄則遞歸調用自身
		else if( st.isDirectory() ){
			// console.log(_src+'是文件夾')
			addFiles( _src, _dist);
		}
	})
}

/* 獲取文件單個刪除 */
function addFileToOSSSync(src,dist){
	var docs = fs.readdirSync(src);
	docs.forEach(function(doc){
		var _src = src + '/' + doc,
			_dist = dist + '/' + doc;
		var st = fs.statSync( _src);
		// 判斷是否爲文件
		if( st.isFile()&&doc!=='.DS_Store' ){
			if (_src.endsWith('.js')||_src.endsWith('.css')||_src.endsWith('.ico')){
				 putOSS(_src,_dist);
			}
			// console.log(_src+'是文件',_dist)
		}
		// 如果是目錄則遞歸調用自身
		else if( st.isDirectory() ){
			// console.log(_src+'是文件夾')
			addFileToOSSSync( _src,_dist);
		}
	})
}

/* 查詢所有的資源 */
async function listDir(dist, nextMarker){
	let result = await client.list({
		MaxKeys: 999,
		prefix: dist,
		marker: nextMarker
	});
  // console.log(result)

	if (result.objects) {
		result.objects.forEach(function (obj) {
			console.log('Object: %s', obj.name);
			delList.push(obj.name)
		});

		if (result.isTruncated) { // 是否有更多
			console.log('-------更多數據-------', result.nextMarker)
			await listDir(dist, result.nextMarker)
		}
	}


}

async function deleteFile(src, dist){

	// 獲取現有文件
	await listDir(dist)

	console.log("------------刪除前----------------")

	// 刪除文件
	await deleteMulti(delList)

	console.log("------------刪除後----------------")
	// 檢查是否刪除
	await listDir(dist)

	console.log("------------上傳----------------")
	// 獲取要上傳的數據
	await addFiles(src, dist)
}

function uploadOSS(src,dist){

  // 刪除所有的
	deleteFile(src, dist)
}

module.exports = uploadOSS

3，在build.js中引入uploadOSS

const path = require('path')
const uploadOSS = require('./uploadOSS')
const local = path.join(__dirname, "../dist");

   在打包結束處添加上傳代碼

// 上傳到oss
new uploadOSS(local, process.env.env_config + '項目名')

4，在webpack.prod.conf.js 修改 output

publicPath: 'https://myBucket.cos.ap-shenzhen-fsi.myqcloud.com/'+ process.env.env_config + '項目名/',   // 可用於配置oss cdn 等資源路徑