UniApp搭建项目模板（三）—— 静态资源自动上传oss

jackyzhang 11/4/2022 uniapp

# 简介

对于跨端开发而言，静态资源管理需要好好斟酌。
先从小程序平台说起，各大运营商针对小程序的包都有一定的体积限制，所以我们不得不将一部分图片上传至云服务器上通过链接的方式去加载，可以减少一部分包体积。
再说 App 平台，我们希望能将图片都打包至 App 中，当然可以选择一部分通过链接加载，这个可以通过业务需要去调整。
所以本篇我们通过 webpack 自定义 loader 的功能实现图片资源路径自动替换，自定义 plugin 功能实现小程序平台自动清理静态资源、自动打包文件上传至 oss 平台

# 通过自定义 loader 实现图片静态资源路径自动替换

/webpack/custom-image-loader.js

const { env } = require('../index')

const imageSources = {
  dev: 'https://dev.source.com/aaa/',
  test: 'https://test.source.com/aaa/',
  prod: 'https://prod.source.com/aaa/'
}

module.exports = function (source) {
  let imageSource = imageSources[env]
  return source.replace(/@\/static\/oss\/images\//g, imageSource)
}

1
2
3
4
5
6
7
8
9
10
11
12
13

vue.config.js

module.exports  =  {
  // ***
  chainWebpack: config => {
    if (process.env.VUE_APP_PLATFORM === 'mp-weixin') {
      config.module
        .rule('vue')
        .use('vue-loader')
        .end()
        .use('customImageLoader')
        .loader(resolve('./webpack/custom-image-loader.js'))
        .end()
    }
    return config
  }
  // ***
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 处理前

example

# 处理后

example

# 小程序平台自动清理 oss 静态资源目录

/webpack/auto-clean.js

const fs = require('fs')
const path = require('path')

function deleteall(path) {
  var files = []
  if (fs.existsSync(path)) {
    files = fs.readdirSync(path)
    files.forEach(function (file, index) {
      var curPath = path + '/' + file
      if (fs.statSync(curPath).isDirectory()) {
        // recurse
        deleteall(curPath)
      } else {
        // delete file
        fs.unlinkSync(curPath)
      }
    })
    fs.rmdirSync(path)
  }
}

class AutoCleanPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('auto-clean', stat => {
      const destPath = compiler.outputPath || stat.compiler.outputPath
      const ossFilePath = path.resolve(destPath, './static/oss')
      try {
        deleteall(ossFilePath)
        console.error('自动清理@/static/oss成功')
      } catch (e) {
        console.error('自动清理@/static/oss失败，请重试')
      }
    })
  }
}

module.exports = AutoCleanPlugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

vue.config.js 中引用

module.exports = {
  chainWebpack: config => {
    if (process.env.VUE_APP_PLATFORM === 'mp-weixin') {
      // ***
      config.plugin('autoCleanPlugin').use(AutoCleanPlugin)
      // ***
    }
  }
}

1
2
3
4
5
6
7
8
9

# 处理前

example

# 处理后

example

# 自动上传至 OSS

待完善

程序猿马尔科

Choose mode