Vue部署至OSS

Vue部署至OSS

安装webpack-aliyun-oss

npm install webpack-aliyun-oss

项目目录添加oss.config.js

exports = {
  region: 'oss-cn-beijing', 
  accessKeyId: 'xxx',
  accessKeySecret: 'xxx',
  bucket: 'xxx'
}

配置vue.config.js

// const webpack = require("webpack");
// const path = require('path');
const oss = require('./oss.config');
const WebpackAliyunOss = require('webpack-aliyun-oss');
console.log(WebpackAliyunOss)
module.exports = {
    devServer: {
        open: true, 
        hot: true,
    },
    publicPath: 'https://file.folkspace.cn/folkspace-web/',
    // publicPath: './',
    productionSourceMap: false,
    configureWebpack: config => {
    let webpackAliyunOss = [
      new WebpackAliyunOss({
        from: ['./dist/**', '!./dist/**/*.html'], // 上传那个文件或文件夹可以是字符串或数组
        dist: "/folkspace-web",  // 需要上传到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 ];
  }
}

打包部署

npm run build