vue-cli-plugin-qiniu-upload

可在vue-cli中使用的simple-qiniu-upload；会通过vue-cli-service注册upload命令。

这是基于simple-qiniu-upload的vue-cli插件，它会注入一个upload命令，可通过vue-cli-service upload来完成上传。

simple-qiniu-upload的参数，全部都能用upload命令行参数来传递，但是不建议这么搞，比较费事，还是在vue.config.js里面配置比较方便。

用法

• 安装

  npm install vue-cli-plugin-qiniu-upload --save-dev

  这个插件只要安装即可。不需要使用vue add或vue invoke命令。

• 配置

  在项目目录新建一个.qiniu文件存放AK和SK。

  在vue.config.js的pluginOptions里面，添加qiniuUpload配置节，来进行simple-qiniu-upload的配置：

  module.exports = {
      pluginOptions: {
          qiniuUpload: {
              base: 'dist',
              glob: 'dist/**',
              globIgnore: [
                  'dist/!(static)/**'
              ],
              bucket: 'static',
              parallelCount: 2
          }
      }
  }   

  各个option的作用，可阅读simple-qiniu-upload

• 定义npm script

  "scripts": {
      "upload": "vue-cli-service upload"
  },

• 运行

  运行npm upload即可上传文件到七牛。建议在生产环境构建之后再执行此命令。

vue项目的配置

附项目中使用的vue.config.js配置：

const path = require('path')
const pkg = require('./package.json')

module.exports = {
    productionSourceMap: true,
    chainWebpack: (config) => {
        config.plugins.delete('prefetch')

        config.output.crossOriginLoading('anonymous')
    },
    assetsDir: `static/app-name/${pkg.version}`,
    publicPath: process.env.NODE_ENV === 'production' ? `//your-qiniu-cdn.domain.com/` : '/',
    integrity: process.env.NODE_ENV === 'production',
    crossorigin: process.env.NODE_ENV === 'production' ? 'anonymous' : undefined,
    pluginOptions: {
        qiniuUpload: {
            base: 'dist',
            glob: 'dist/**',
            globIgnore: [
                'dist/!(static)/**'
            ],
            bucket: 'static',
            overrides: true,
            parallelCount: 2
        }
    }
}

说明：

• assetsDir

  增加assetsDir的配置，可以让静态资源按照package.json中的version进行管理，这样上传到七牛之后，文件路径也包含了版本号，将来进行管理、查询和删除旧版本的文件，就很方便。

• publicPath

  需在生产环境的时候配置为cdn域名。

• integrity

  这个是开启cdn资源的SRI验证。SRI

• crossorigin

  给script添加crossorigin属性。还有一行webpack的配置也是：

  config.output.crossOriginLoading('anonymous')

  因为crossorigin只会给注入index.html的脚本添加crossorigin属性，但是那些动态加载的chunk文件不会添加，所以需手动配置webpack。

删除命令

由于simple-qiniu-upload新增了按照前缀，删除指定文件的功能，所以此插件也提供了一个新的delete命令支持文件的删除。

此命令提供的额外option如下：

--fetch-page-size: specify page size when fetch qiniu files to delete(default: 500),
--fetch-prefix: specify prefix of files to delete(default: empty string, required),
--fetch-file: specify filename for fetch results(default: qiniu-prefix-fetch.json),
--delete-batch-size: specify batch size when delete(default: 100),
--delete-file: specify filename for delete results(default: qiniu-batch-delete.json)

如果要在命令行上使用，只需要这么做：

  "scripts": {
    "delete": "vue-cli-service delete --fetch-page-size 1000 --fetch-prefix=v1.0.0/"
  },

以上的配置也可以在vue.config.js中配置：

pluginOptions: {
    qiniuUpload: {
        accessKey: process.env.accessKey,
        secretKey: process.env.secretKey,
        envFile: false,
        base: 'dist',
        glob: 'dist/**',
        globIgnore: [
            `dist/!(${process.env.VUE_APP_ASSETS_DIR})/**`
        ],
        bucket: 'static',
        overrides: true,
        parallelCount: 2,
        fetchPrefix: 'v0.1.0/'
    }
}

fetchPrefix用来指定要删除的文件目录前缀，最后一定要用/结尾。