Vue-cli-plugin-qiniu-upload NPM

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。