{"_id":"@bluse/vue-cli-plugin-qiniu-upload","_rev":"1-75dd5653e4a832b27a1ee216d8850f75","name":"@bluse/vue-cli-plugin-qiniu-upload","dist-tags":{"latest":"0.2.3"},"versions":{"0.2.3":{"name":"@bluse/vue-cli-plugin-qiniu-upload","version":"0.2.3","description":"vue plugin for simple-qiniu-upload.","repository":{"type":"git","url":"git+https://github.com/liuyunzhuge/vue-cli-plugin-qiniu-upload.git"},"keywords":["vue-cli-plugin-qiniu-upload"],"author":{"name":"liuyunzhuge"},"license":"MIT","bugs":{"url":"https://github.com/liuyunzhuge/vue-cli-plugin-qiniu-upload/issues"},"homepage":"https://github.com/liuyunzhuge/vue-cli-plugin-qiniu-upload#readme","dependencies":{"simple-qiniu-upload":"^0.2.0"},"main":"index.js","devDependencies":{},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"gitHead":"f07f5120e9b7e7d53d14b39dd7e7a6b69f2f47bb","_id":"@bluse/vue-cli-plugin-qiniu-upload@0.2.3","_nodeVersion":"16.13.1","_npmVersion":"8.3.2","dist":{"integrity":"sha512-hU10yMONptNsELH2NDU3qTo/lKWzMz9XwIcVe4/MKVOu7Xk+3f8hv/ZrrpqXpMYBMsHaCtxVNvO1aZJS1p+afQ==","shasum":"71aece03aa194e6c40fc6254a986985d25ff98e9","tarball":"https://registry.npmjs.org/@bluse/vue-cli-plugin-qiniu-upload/-/vue-cli-plugin-qiniu-upload-0.2.3.tgz","fileCount":8,"unpackedSize":11618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8gcUCRA9TVsSAnZWagAAHSkP/jM/nDikjtCQUi1nqPW7\nlcLeGlAweC8y2FFmoGF88B4cFH3cgkTPyfbN+XnipIvMKjL7jSnzuVvSMAEn\nlHBKZUGWfOvSfjocDpMmMeefFtJHvJIoiLCzCVC1tLHwkRI/MY2EOqd2/586\nBGzyJEyyJpcRX/SfakqPXrbbVHUzrp4S7DSu90xzUSGhpG8UoPhfmZOShNhU\nxGkOrM9RS4R7xfEZgkyH5Qxs0fr7o1rg/yQqmXDvZQsMWcEz6HqFuOwKNRLw\nywiOg28z1mfffWHaZUYJFFGagTVPdcPBrjYqB33OqUUCXuHlk9V7dF/V9L3i\nIoZLrmfJTO2UA4DLgNycNbZimm8BtDBPPTI+icqOXqlXoqtMB6rO4KIZ6EW0\n4xtaZVBvH2Pgw0qH6BWwk+g/V2bLWzmpecMuHjbQypdxWabz1pTKD8nwQKfe\nCckEO/HN9OSJNxZDIMEXDAlvTK9/kAI3elwuX/nxvWWNJwLpPMZPCQboMLDr\npD+k9PGAOlyAWUwMLb/sepk8m3dXWUs16hnsyrQTuAsUap8I2ax29c8sJ0+0\nSX9tLBq5RLC+U5qR7T0f2Yr7pXnLqVhQjIVMqlqoJNKCSs6bhuG9I799AoZS\nQnELzSJB/oE0G7qwrN9K0YNa9oSaCnOXgK+llMCdI2KslJy/aAUKAISm0DNY\n4Riz\r\n=KPm0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICzq4mKErs303G788LFpHM2irFQGwJ4qKMdhl3WdtkLZAiEA1wmMy3A9nvPk8D55WqzqpcJ5UDaEtDsiTTFC/Ifns7g="}]},"_npmUser":{"name":"bluse","email":"bluse_wang@126.com"},"directories":{},"maintainers":[{"name":"bluse","email":"bluse_wang@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-cli-plugin-qiniu-upload_0.2.3_1643251475947_0.786140037083719"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-27T02:44:35.891Z","0.2.3":"2022-01-27T02:44:36.079Z","modified":"2022-04-04T19:51:13.902Z"},"maintainers":[{"name":"bluse","email":"bluse_wang@126.com"}],"description":"vue plugin for simple-qiniu-upload.","homepage":"https://github.com/liuyunzhuge/vue-cli-plugin-qiniu-upload#readme","keywords":["vue-cli-plugin-qiniu-upload"],"repository":{"type":"git","url":"git+https://github.com/liuyunzhuge/vue-cli-plugin-qiniu-upload.git"},"author":{"name":"liuyunzhuge"},"bugs":{"url":"https://github.com/liuyunzhuge/vue-cli-plugin-qiniu-upload/issues"},"license":"MIT","readme":"[![npm](https://img.shields.io/npm/dm/vue-cli-plugin-qiniu-upload.svg)](https://www.npmjs.com/package/vue-cli-plugin-qiniu-upload)\n[![npm](https://img.shields.io/npm/v/vue-cli-plugin-qiniu-upload.svg)](https://www.npmjs.com/package/vue-cli-plugin-qiniu-upload)\n[![npm](https://img.shields.io/npm/l/vue-cli-plugin-qiniu-upload.svg)](https://www.npmjs.com/package/vue-cli-plugin-qiniu-upload)\n\n# vue-cli-plugin-qiniu-upload\n可在vue-cli中使用的simple-qiniu-upload；会通过vue-cli-service注册upload命令。\n\n这是基于[simple-qiniu-upload](https://github.com/liuyunzhuge/simple-qiniu-upload)的vue-cli插件，它会注入一个`upload`命令，可通过`vue-cli-service upload`来完成上传。\n\n`simple-qiniu-upload`的参数，全部都能用`upload`命令行参数来传递，但是不建议这么搞，比较费事，还是在`vue.config.js`里面配置比较方便。\n\n## 用法\n* 安装\n\n    ```\n    npm install vue-cli-plugin-qiniu-upload --save-dev\n    ```\n    这个插件只要安装即可。不需要使用`vue add`或`vue invoke`命令。\n\n* 配置\n\n    在项目目录新建一个`.qiniu`文件存放AK和SK。\n\n    在`vue.config.js`的`pluginOptions`里面，添加`qiniuUpload`配置节，来进行`simple-qiniu-upload`的配置：\n    ```js\n    module.exports = {\n        pluginOptions: {\n            qiniuUpload: {\n                base: 'dist',\n                glob: 'dist/**',\n                globIgnore: [\n                    'dist/!(static)/**'\n                ],\n                bucket: 'static',\n                parallelCount: 2\n            }\n        }\n    }   \n    ```\n    各个option的作用，可阅读[simple-qiniu-upload](https://github.com/liuyunzhuge/simple-qiniu-upload)\n\n* 定义`npm script`\n    ```\n    \"scripts\": {\n        \"upload\": \"vue-cli-service upload\"\n    },\n    ```\n\n* 运行\n    \n    运行`npm upload`即可上传文件到七牛。建议在生产环境构建之后再执行此命令。\n\n## vue项目的配置\n附项目中使用的`vue.config.js`配置：\n```js\nconst path = require('path')\nconst pkg = require('./package.json')\n\nmodule.exports = {\n    productionSourceMap: true,\n    chainWebpack: (config) => {\n        config.plugins.delete('prefetch')\n\n        config.output.crossOriginLoading('anonymous')\n    },\n    assetsDir: `static/app-name/${pkg.version}`,\n    publicPath: process.env.NODE_ENV === 'production' ? `//your-qiniu-cdn.domain.com/` : '/',\n    integrity: process.env.NODE_ENV === 'production',\n    crossorigin: process.env.NODE_ENV === 'production' ? 'anonymous' : undefined,\n    pluginOptions: {\n        qiniuUpload: {\n            base: 'dist',\n            glob: 'dist/**',\n            globIgnore: [\n                'dist/!(static)/**'\n            ],\n            bucket: 'static',\n            overrides: true,\n            parallelCount: 2\n        }\n    }\n}\n```\n说明：\n* assetsDir\n\n    增加`assetsDir`的配置，可以让静态资源按照`package.json`中的`version`进行管理，这样上传到七牛之后，文件路径也包含了版本号，将来进行管理、查询和删除旧版本的文件，就很方便。\n\n* publicPath\n\n    需在生产环境的时候配置为cdn域名。\n\n* integrity\n\n    这个是开启cdn资源的SRI验证。[SRI](https://developer.mozilla.org/zh-CN/docs/Web/Security/%E5%AD%90%E8%B5%84%E6%BA%90%E5%AE%8C%E6%95%B4%E6%80%A7)\n\n* crossorigin\n\n    给script添加`crossorigin`属性。还有一行`webpack`的配置也是：\n    ```\n    config.output.crossOriginLoading('anonymous')\n    ```\n    因为crossorigin只会给注入`index.html`的脚本添加`crossorigin`属性，但是那些动态加载的`chunk`文件不会添加，所以需手动配置`webpack`。\n\n## 删除命令\n由于[simple-qiniu-upload](https://github.com/liuyunzhuge/simple-qiniu-upload)新增了按照前缀，删除指定文件的功能，所以此插件也提供了一个新的`delete`命令支持文件的删除。\n\n此命令提供的额外option如下：\n```\n--fetch-page-size: specify page size when fetch qiniu files to delete(default: 500),\n--fetch-prefix: specify prefix of files to delete(default: empty string, required),\n--fetch-file: specify filename for fetch results(default: qiniu-prefix-fetch.json),\n--delete-batch-size: specify batch size when delete(default: 100),\n--delete-file: specify filename for delete results(default: qiniu-batch-delete.json)\n```\n\n如果要在命令行上使用，只需要这么做：\n```json\n  \"scripts\": {\n    \"delete\": \"vue-cli-service delete --fetch-page-size 1000 --fetch-prefix=v1.0.0/\"\n  },\n```\n\n以上的配置也可以在`vue.config.js`中配置：\n```js\npluginOptions: {\n    qiniuUpload: {\n        accessKey: process.env.accessKey,\n        secretKey: process.env.secretKey,\n        envFile: false,\n        base: 'dist',\n        glob: 'dist/**',\n        globIgnore: [\n            `dist/!(${process.env.VUE_APP_ASSETS_DIR})/**`\n        ],\n        bucket: 'static',\n        overrides: true,\n        parallelCount: 2,\n        fetchPrefix: 'v0.1.0/'\n    }\n}\n```\n`fetchPrefix`用来指定要删除的文件目录前缀，最后一定要用`/`结尾。","readmeFilename":"README.md"}