沃梦达 / IT编程 / 前端开发 / 正文

vue打包成功后直接将文件上传到oss

1:先安装 npm install aliyunoss-webpack-plugin --save-dev2:直接看代码 文件名build.oss.testvar ossWebpackUpload = require(aliyunoss-webpack-plugin)/**初始话 */var ossLoad = new ossWebpackUpload({bui...

1:先安装 npm install aliyunoss-webpack-plugin --save-dev

2:直接看代码 文件名build.oss.test


var ossWebpackUpload = require('aliyunoss-webpack-plugin')

/**初始话 */
var ossLoad = new ossWebpackUpload({
  buildPath: 'dist/**',
  region: 'oss-cn-hubei[实际region]',//这里只填地域部分,不要复制的太全了
  accessKeyId: '您的key',
  accessKeySecret: '您的密钥',
  bucket: 'test-vue-oss[您的实际bucket]',
  deleteAll: true,
  generateObjectPath: function(filename,file) {
    return file.replace(/dist\//, '');
  },
  getObjectHeaders: function(filename) {
    return {
      Expires: 6000
    }
  }
});

/**上传 */
ossLoad.apply()



使用说明:
1:若想先打包,后上传 可以直接配置package.json上传的命令如:“build-oss-test”: “node build/build.oss-test.js”
然后先正常build 然后再 npm run build-oss-test

2:若想打包时就直接上传到oss
可以在对应环境的build-test.js下方中加入const ossUpload = require('build.oss.test') 注意路径
下面是部分贴图

  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false, 
      chunks: false,
      chunkModules: false
    }) + '\n\n')
    if (stats.hasErrors()) {
      console.log(chalk.red('  Build failed with errors.\n'))
      process.exit(1)
    }

    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
    const ossUpload = require('build.oss.test') //其他不要动,只需要加这里
  })

个人感觉放在这里可以保证打包成功之后才上传,如果放在打包的conf.js里面,会出现 仅仅上传了index

本文标题为:vue打包成功后直接将文件上传到oss