# 上传 static 文件夹至 OSS


vue.js 打包后的 static 文件夹,有时会特别大,如果你的服务器带宽太小,整体网站的加载速度就会很慢。像阿里云的很多服务器,都只有 1M 的带宽,理论上加载 1MB 的文件就需要 8 秒钟。这时候就要借助第三方来加速了。

# OSS

OSS是阿里云的对象存储服务。

首先,开通 OSS 服务,新建一个公共读的 Bucket。获取阿里云帐号的 AccessKey。 获取AccessKey

# 上传

首先在你的项目中安装以下两个依赖:ali-ossglob

npm install ali-oss glob --save-dev

然后修改 vue.js 项目中 config/index.js 中assetsPublicPath的值为 OSS 的目录(注意后面不加 static)。 修改vue.js项目中config/index.js中assetsPublicPath的值为OSS的目录

接着在 build 文件夹下建立 oss.js 文件,输入以下内容

const OSS = require('ali-oss')
const glob = require('glob')
const path = require('path')
const fs = require('fs')

const Client = new OSS({
  region: 'oss-cn-beijing',
  accessKeyId: '阿里云帐号的accessKeyId',
  accessKeySecret: '阿里云帐号的accessKeySecret',
  bucket: 'bucket名称'
})
// oss上存放static文件夹的路径
const ossPath = 'whycwl/static/'

Client.list({
  prefix: ossPath
})
  .then(res => {
    if (res.res.status === 200 && res.objects) {
      Client.deleteMulti(res.objects.map(item => item.name))
        .then(res => {
          console.log(res)
          UploadStatic()
        })
        .catch(err => {
          console.log(err)
        })
    }
  })
  .catch(err => {
    console.log(err)
  })
// 相对本文件的static目录
const UploadStatic = () => {
  let cwd = path.resolve(__dirname, './../dist/static/')
  glob('**/*.*', { cwd, nodir: true }, (err, files) => {
    if (err) {
      console.log(err)
    } else {
      if (files && files.length > 0) {
        let arr = files.map(file => {
          return {
            localPath: path.resolve(cwd, file),
            ossFileName: ossPath + file
          }
        })
        Promise.all(
          arr.map(file =>
            Client.put(file.ossFileName, fs.readFileSync(file.localPath))
          )
        ).then(results => {
          console.log('上传成功')
        })
      }
    }
  })
}

最后在每次执行完npm run build后再执行node build/oss.js就可以了。这样就可以每次只把 index.html 文件上传到 nginx 配置的目录中。

也可以把 node build/oss.js 写入到 package.json 的 scripts 里。

# 其他

OSS 还可以设置防盗链、CDN 什么的,可以多研究。

如果静态文件里有字体文件,需要在 OSS 里设置允许跨域。否则,浏览器会报跨域错误。

# Nuxt 使用方法

修改nuxt.config.js中的build.pulicPath字段值即可。 详细设置参考Nuxt 官方文档

最后更新时间: 11/3/2019, 5:10:21 PM