vue打包自动部署阿里云oss

web架构前后端完全分离，所以前端代码部署到OSS，可以实现质的飞跃，前端页面秒开，
利用oss可以部署静态服务器的功能，将vue打包后的代码上传到oss上

安装npm i -D webpack-aliyun-oss
接下来就修改vue.config.js文件

const WebpackAliyunOss = require('webpack-aliyun-oss')

const env = process.env.NODE_ENV
let plugins = []
#当生产打包的时候部署
if('production' === env) {
  plugins = [
    new WebpackAliyunOss({
      // oss相关配置
      region: 'oss-cn-shenzhen',
      accessKeyId: 'xxxx',
      accessKeySecret: 'xxxx',
      bucket: 'xxx',
      // 忽略上传sourcemap到oss，因为oss是公开的，不应该将sourcemap对外
      from: ['./dist/**', '!**.map'], // 上传的文件或目录
      dist: `/`, // 上传到oss的指定目录
      // 配置标识符 "/" 和 "\" 的区别
      setOssPath: (filePath) => {
        const index = filePath.lastIndexOf('dist')
        const Path = filePath.substring(index + 4, filePath.length)
        return Path.replace(/\\/g, '/')
      },
      setHeaders: () => false,
      // 出错信息写入本地upload.error.log
      logToLocal: true,
      // 并发上传的数量
      parallel: 100,
      // 是否覆盖oss同名文件
      overwrite: true
    })
  ]
}

module.exports = {
  //其他原有内容
   configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    //当做变量传递过来
    plugins: plugins
  },
}

运行npm run build:prod自动上传到oss