vue webpack配置文件 自动上传阿里云

安装插件包

webpack的插件，用于自动上传静态资源到阿里的oss上，以便作为静态资源使用，当然你也可以用于自动存储大文件。aliyunoss-webpack-plugin

npm install aliyunoss-webpack-plugin --dev
# 或
yarn add aliyunoss-webpack-plugin

配置环境

新建测试和生产环境文件

// .env.production 生产环境文件名称
NODE_ENV = 'production'

VUE_APP_FLAG = 'production'

outputDir = 'dist'

ossAccessKeyId = '你自己的ossAccessKeyId'

ossAccessKeySecret = '你自己的ossAccessKeySecret'

// .env.test 测试环境文件名称
NODE_ENV = 'test'

VUE_APP_FLAG = 'test'

outputDir = 'dist'

ossAccessKeyId = '你自己的ossAccessKeyId'

ossAccessKeySecret = '你自己的ossAccessKeySecret'

配置vue.config.js文件

// vue.config.js
const AliyunossWebpackPlugin = require('aliyunoss-webpack-plugin');
const env = process.env.NODE_ENV;
let baseUrl = './';
if (env === 'test') {
  baseUrl = 'https://xyytest.oss-cn-beijing.aliyuncs.com/static/test001/';
} else if (env === 'production') {
  baseUrl = 'https://learn001.oss-cn-beijing.aliyuncs.com/static/test001/';
}
module.exports = {
  // 发布文件路径
  publicPath: baseUrl,
  // 输出文件目录名称
  outputDir: process.env.outputDir,
  // 开发环境配置
  devServer: {
    open: true, // 启动完成自动在浏览器中打开项目
  },
  // 配置文件 自动上传oss
  configureWebpack: (config) => {
    console.log('test config=>', config);
    if (env === 'test' || env === 'production') {
      // 为c测试、生产环境修改配置...
      let webpackAliyunOss = [
        new AliyunossWebpackPlugin({
          buildPath: 'dist/**',
          region: 'oss-cn-beijing',
          accessKeyId: process.env.ossAccessKeyId,
          accessKeySecret: process.env.ossAccessKeySecret,
          bucket: env == 'test' ? 'xyytest' : 'learn001',
          generateObjectPath: (filename, file) => {
            //配置上传地址
            return file.replace(/dist\//, '/static/test001/');
          },
        }),
      ];
      config.plugins = [...config.plugins, ...webpackAliyunOss];
    } else {
      // 为开发环境修改配置...
    }
  },
};

如何获取ossAccessKeyId

如何获取AccessKey ID和AccessKey Secret

构建部署测试环境

资源自动上传到bucket的xyytest

npm run build:test

构建部署生产环境

资源自动上传到bucket的learn001

npm run build:prod