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。