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

最新推荐文章于 2025-01-09 17:35:43 发布

你看不惯我又干不掉我

最新推荐文章于 2025-01-09 17:35:43 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue oss 文章标签： vue 打包上传oss vue 上传oss vue打包上传到阿里云存储 vue 打包上传

本文链接：https://blog.csdn.net/qq_24232123/article/details/115133130

vue 同时被 2 个专栏收录

1 篇文章

订阅专栏

oss

1 篇文章

订阅专栏

该博客介绍了如何配置和使用aliyunoss-webpack-plugin将Webpack打包后的文件自动上传到阿里云OSS。通过在package.json中设置命令，可以在打包成功后立即执行上传操作，确保文件上传发生在构建无误之后。此外，还提供了直接在Webpack配置文件中触发上传的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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