1.安装 webpack-aliyun-oss

1
npm install webpack-aliyun-oss -D

2.在根目录新建oss.config.js

至于oss的配置项，请自行百度创建

1
2
3
4
5
6
7
module.exports = {
    // 例如：oss-cn-beijing
    region: '你的oss服务器区域, 
    accessKeyId: '你的accessKeyId',
    accessKeySecret: '你的accessKeySecret',
    bucket: '你的bucket'
}

3.对vue.config.js进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// vue.config.js
const path = require('path')
const WebpackAliyunOss = require("webpack-aliyun-oss"); // 引入webpack-aliyun-oss
const Oss = require('./oss.config'); // 引入刚刚创建的oss.js文件

function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {

    configureWebpack: config => {
        let webpackAliyunOss = [
          new WebpackAliyunOss({
            from: "./dist/**", // 上传哪个文件或文件夹  可以是字符串或数组
            // dist: "",  // 需要上传到oss上的给定文件目录
            region: Oss.region,
            accessKeyId: Oss.accessKeyId,
            accessKeySecret: Oss.accessKeySecret,
            bucket: Oss.bucket,
            setOssPath: filePath => {
              // some operations to filePath
              let index = filePath.lastIndexOf("dist");
              let Path = filePath.substring(index + 4, filePath.length);
              return Path.replace(/\\/g, "/");
            },
            setHeaders: () => {
              // some operations to filePath
              // return false to use default header
              return {
                "Cache-Control": "max-age=31536000"
              }
            }
          })
        ]
        config.plugins = [...config.plugins, ...webpackAliyunOss ]
    }
}

4.插件配置选项

  • from: 上传哪些文件，支持类似gulp.src的glob方法，如’./build/**’, 可以为glob字符串或者数组。

    作为插件使用时：可选，默认为output.path下所有的文件。

    独立使用时：必须，否则不知道从哪里取图片：）

  • dist: 上传到oss哪个目录下，默认为oss根目录。可作为路径前缀使用。

  • region: 阿里云上传区域

  • accessKeyId: 阿里云的授权accessKeyId
  • accessKeySecret: 阿里云的授权accessKeySecret
  • bucket: 上传到哪个bucket
  • timeout: oss超时设置，默认为30秒(30000)
  • verbose: 是否显示上传日志，默认为true
  • deletOrigin: 上传完成是否删除原文件，默认false
  • deleteEmptyDir: 如果某个目录下的文件都上传到cdn了，是否删除此目录。deleteOrigin为true时候生效。默认false。
  • setOssPath: 自定义上传路径的函数。接收参数为当前文件路径。不传，或者所传函数返回false则按默认路径上传。(默认为output.path下文件路径)
  • setHeaders: 配置headers的函数。接收参数为当前文件路径。不传，或者所传函数返回false则不设置header。
  • test: 测试，仅显示要上传的文件，但是不执行上传操作。默认false