Skip to content
可在vue-cli中使用的simple-qiniu-upload;会通过vue-cli-service注册upload命令。
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig create Dec 27, 2019
.gitignore create Dec 27, 2019
.npmignore create Dec 27, 2019
README.md readme Jan 18, 2020
index.js 0.2.1 Jan 17, 2020
package.json 0.2.3 Jan 17, 2020

README.md

npm npm 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 addvue invoke命令。

  • 配置

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

    vue.config.jspluginOptions里面,添加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用来指定要删除的文件目录前缀,最后一定要用/结尾。

You can’t perform that action at this time.