技術標籤：Vue

1.引入ali-oss

npm install ali-oss --save

2.在根目錄下建立oss.config.js

module.exports = {
    region: 'Your region', // 例如oss-cn-beijing...
    accessKeyId: 'AK',
    accessKeySecret: 'SK',
    bucket: 'Your Bucket' // bucket
}

3.在vue.config.js中加入以下程式碼

const oss = require('./oss.config'); //引入oss配置
const WebpackAliyunOss = require('webpack-aliyun-oss');
const path = require('path')
module.exports = {
    // devServer: {
    //     open: true,
    //     hot: true,
    // },
    publicPath:'打包後的檔案地址',
    // productionSourceMap: false,
    configureWebpack: config => {
        let webpackAliyunOss = [
            new WebpackAliyunOss({
                from:'./dist/**', //上傳的檔案或目錄
                dist:'上傳到那個資料夾', //上傳到oss的指定目錄
                region:oss.region,
                accessKeyId:oss.accessKeyId,
                accessKeySecret:oss.accessKeySecret,
                bucket:oss.bucket,
                test: false, // 是否測試上傳路徑是否正確
                // 配置識別符號 "/" 和 "\" 的區別
                setOssPath:filePath => {
                    let index = filePath.lastIndexOf("dist");
                    let Path = filePath.substring(index + 4, filePath.length);
                    return Path.replace(/\\/g, "/");
                },
                setHeaders: () => {
                    return {
                        "Cache-Control": "max-age=31536000"
                    }
                }
            })
        ];
        config.plugins = [...config.plugins, ...webpackAliyunOss]
    }
}
 

4.打包測試上傳

npm run build 

就可以檢視是否打包上傳成功了