欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue-cli3打包文件上传OSS服务器

程序员文章站 2022-07-10 18:11:34
...

1.下载依赖

npm install webpack-aliyun-oss --save

2.在项目目录添加oss.js文件

vue-cli3打包文件上传OSS服务器

 

module.exports = {
    region: 'oss服务器区域', // 例如:oss-cn-beijing
    accessKeyId: 'accessKeyId',
    accessKeySecret: 'accessKeySecret',
    bucket: 'bucket'
}
  • 对vue.config.js进行配置
    上面的图片有两个vue.config.js是为了我自己方便调试,因为如果改成下面的配置的话,npm run serve将无效,这时候每次都要npm run build比较麻烦,也无法实时修改代码看效果。(另外一个js是你之前的vue.config.js)

    // const webpack = require("webpack");
    // const path = require('path');
    const oss = require('./oss.config');    // 引入刚刚创建的oss.js文件
    const WebpackAliyunOss = require('webpack-aliyun-oss');
    console.log(WebpackAliyunOss)
    module.exports = {
        devServer: {
            open: true, 
            hot: true,
        },
        publicPath: 'https://XXX/test/',
        //publicPath: './',
    
        productionSourceMap: false,
        configureWebpack: config => {
        let webpackAliyunOss = [
          new WebpackAliyunOss({
            from: ['./dist/**', '!./dist/**/*.html'], // 上传那个文件或文件夹  可以是字符串或数组
            dist: "/test",  // 需要上传到oss上的给定文件目录
            region: oss.region,
            accessKeyId: oss.accessKeyId,
            accessKeySecret: oss.accessKeySecret,
            bucket: oss.bucket,
            
            // test: true,   
            //上面一行,可以在进行测试看上传路径是否正确, 打开后只会显示上传路径并不会真正上传;
            
            // 因为文件标识符 "\"  和 "/" 的区别 不进行 setOssPath配置,上传的文件夹就会拼到文件名上, 丢失了文件目录,所以需要对setOssPath 配置。
            setOssPath: filePath => {
              // some operations to filePath
              let index = filePath.lastIndexOf("dist");
              let Path = filePath.substring(index + 4, filePath.length);
              return Path.replace(/\\/g, "/");
            },
            setHeaders: filePath => {
              // some operations to filePath
              // return false to use default header
              return {
                "Cache-Control": "max-age=31536000"
              };
            }
          })
        ];
        config.plugins = [...config.plugins, ...webpackAliyunOss ];
      }
    }

 

相关标签: OSS