当前位置: 首页 > 工具软件 > S3 Plugin > 使用案例 >

vue项目自动化部署到亚马逊S3或者阿里云OSS或者服务器

赵嘉悦
2023-12-01

部署到AWS S3 

    1.npm

npm i aws-s3-webpack-plugin

    2.  具体参数看文档   

    config
          .plugin("aws-s3-webpack-plugin")
          .use(require("aws-s3-webpack-plugin"), [
            {
              buildPath: "dist/**",
              region: process.env.VUE_APP_s3_region,
              accessKeyId: process.env.VUE_APP_s3_accessKeyId,
              secretAccessKey: process.env.VUE_APP_s3_secretAccessKey,
              bucket: process.env.VUE_APP_s3_bucket,
              generateObjectPath: (filename, file) => {
                return (
                  process.env.VUE_APP_s3_filepath + file.replace(/dist\//, "")
                );
              },
            },
          ]);




VUE_APP_s3_region= 'xx-xxx-xxx'
VUE_APP_s3_accessKeyId= 'xxxxx'
VUE_APP_s3_secretAccessKey= 'xxxx'
VUE_APP_s3_bucket= 'xxx'
VUE_APP_s3_filepath='html/xx/'

部署到oss    aliyunoss-webpack-plugin 

   1.npm

 npm install aliyunoss-webpack-plugin --save-dev

    2.  具体参数看文档   

cli2   webpack.prod.conf.js
const AliyunossWebpackPlugin = require('aliyunoss-webpack-plugin')

plugins: [
    ...
    new AliyunossWebpackPlugin({
      buildPath: 'dist/**',
      region: your.region,
      accessKeyId: your.accessKeyId,
      accessKeySecret: your.accessKeySecret,
      bucket: your.bucket,
      generateObjectPath: function(filename, file) {
        //配置上传地址
        return file.replace(/dist\//, '')
      },
    })
}


cli3 vue.config.js

   chainWebpack(config) {
    config.when(process.env.ENV !== "development", (config) => {
      config
        .plugin("aliyunoss-webpack-plugin")
        .use(require("aliyunoss-webpack-plugin"), [
          {
            buildPath: "dist/**",
            region: process.env.VUE_APP_region,
            accessKeyId: process.env.VUE_APP_accessKeyId,
            accessKeySecret: process.env.VUE_APP_accessKeySecret,
            bucket: process.env.VUE_APP_bucket,
            generateObjectPath: (filename, file) => {
              return process.env.VUE_APP_filepath + file.replace(/dist\//, "");
            },
          },
        ]);
    });
  }

 

部署到服务器   fjpublish 详情看文档吧

https://fjpublish.manman.io/

 类似资料: