上传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官方文档

最后更新时间: 9/15/2018, 11:58:37 AM