Vue?FileManagerPlugin?報錯問題及解決
Vue FileManagerPlugin 報錯
項目場景
vue build時想直接打包輸出成zip
問題描述
按照如下官方文檔內寫法, 提示出
Invalid actions object. FileManagerPlugin has been initialized using an actions object that does not match the API schema
const FileManagerPlugin = require('filemanager-webpack-plugin');
module.exports = {
...
...
plugins: [
new FileManagerPlugin({
onEnd: {
copy: [
{ source: '/path/from', destination: '/path/to' },
{ source: '/path/**/*.js', destination: '/path' },
{ source: '/path/fromfile.txt', destination: '/path/tofile.txt' },
{ source: '/path/**/*.{html,js}', destination: '/path/to' },
{ source: '/path/{file1,file2}.js', destination: '/path/to' },
{ source: '/path/file-[hash].js', destination: '/path/to' }
],
move: [
{ source: '/path/from', destination: '/path/to' },
{ source: '/path/fromfile.txt', destination: '/path/tofile.txt' }
],
delete: [
'/path/to/file.txt',
'/path/to/directory/'
],
mkdir: [
'/path/to/directory/',
'/another/directory/'
],
archive: [
{ source: '/path/from', destination: '/path/to.zip' },
{ source: '/path/**/*.js', destination: '/path/to.zip' },
{ source: '/path/fromfile.txt', destination: '/path/to.zip' },
{ source: '/path/fromfile.txt', destination: '/path/to.zip', format: 'tar' },
{
source: '/path/fromfile.txt',
destination: '/path/to.tar.gz',
format: 'tar',
options: {
gzip: true,
gzipOptions: {
level: 1
},
globOptions: {
nomount: true
}
}
}
]
}
})
],
...
}原因分析
直接去npm里去查文檔, 看到了這個??!!

結構變了!
解決方案
好了既然知道問題,解決方案有兩種
1.用老版本~
npm i filemanager-webpack-plugin@2.0.5
2.用新版本
具體如何使用參考文檔~~
npm文檔地址:https://www.npmjs.com/package/filemanager-webpack-plugin/v/3.1.0
Vue配置filemanager-webpack-plugin報錯
安裝包版本:"filemanager-webpack-plugin": "^7.0.0-beta.0",
正確配置方式
const FileManagerPlugin = require('filemanager-webpack-plugin') // 引入
const packageName = 'dist'
chainWebpack(config) {
config.plugin('fileManager')
.use(FileManagerPlugin).tap(args => [{
events: {
onEnd: {
delete: [ // 首先需要刪除項目根目錄下的dist.zip
`./${packageName}.zip`
],
archive: [ // 選擇文件夾將之打包成xxx.zip并放在根目錄
{ source: `./${packageName}`, destination: `./${packageName}.zip` }
]
}
}
}])
}以上配置,可以解決以下問題
1.TypeError: config.plugins.push is not a function
2. ERROR ValidationError: Invalid actions object. FileManagerPlugin has been initialized using an actions object that does not match the API schema.
- actions has an unknown property 'onEnd'. These properties are valid:
object { events?, runTasksInSeries?, context?, runOnceInWatchMode? }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
antd?vue?表格rowSelection選擇框功能的使用方式
這篇文章主要介紹了antd?vue?表格rowSelection選擇框功能的使用方式,具有很好的參考價值,希望對大家有所幫助。以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。2022-12-12
vue里的axios如何獲取本地json數(shù)據(jù)
這篇文章主要介紹了vue里的axios如何獲取本地json數(shù)據(jù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08
vue3基礎組件開發(fā)detePicker日期選擇組件示例
這篇文章主要為大家介紹了vue3基礎組件開發(fā)-detePicker(日期選擇組件)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03
使用vue3-print-nb實現(xiàn)打印pdf分頁代碼示例
這篇文章主要介紹了使用vue3-print-nb實現(xiàn)打印pdf分頁的相關資料,這種方法不僅適用于Vue3項目,也可以在其他前端框架中實現(xiàn)類似的打印分頁功能,需要的朋友可以參考下2024-10-10
ElementUI Tag組件實現(xiàn)多標簽生成的方法示例
這篇文章主要介紹了ElementUI Tag組件實現(xiàn)多標簽生成的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
使用vue框架 Ajax獲取數(shù)據(jù)列表并用BootStrap顯示出來
這篇文章主要介紹了使用vue框架 Ajax獲取數(shù)據(jù)列表并用BootStrap顯示出來,需要的朋友可以參考下2017-04-04

