Vue?FileManagerPlugin?報錯問題及解決

更新時間：2022年10月14日 09:45:25 作者：李二茍

這篇文章主要介紹了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? }

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue組件中slot的用法
這篇文章交詳細的給大家介紹了vue組件中slot的用法，主要是讓組件的可擴展性更強，具體內容詳情大家參考下本文
2018-01-01
elementui時間/日期選擇器選擇禁用當前之前(之后)時間代碼實例
當我們在進行網頁開發(fā)時,通常需要用到一些日期組件來方便用戶選擇時間,其中element日期組件是一個非常好用的工具,這篇文章主要給大家介紹了關于elementui時間/日期選擇器選擇禁用當前之前(之后)時間的相關資料,需要的朋友可以參考下
2024-02-02
一步步帶你用vite簡單搭建ts+vue3全家桶
Vue3與TS的聯(lián)合是大趨勢,下面這篇文章主要給大家介紹了關于用vite簡單搭建ts+vue3全家桶的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07
VUE中的export default和export使用方法解析
export default和export都能導出一個模塊里面的常量，函數(shù)，文件，模塊等，在其它文件或模塊中通過import來導入常量，函數(shù)，文件或模塊。但是，在一個文件或模塊中export,import可以有多個，export default卻只能有一個。
2022-12-12
前端VUE雙語實現(xiàn)方案詳細教程
在項目需求中我們會遇到國際化的中英文切換,這篇文章主要給大家介紹了關于前端VUE雙語實現(xiàn)方案的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-08-08
Vue-cli3項目引入Typescript的實現(xiàn)方法
這篇文章主要介紹了Vue-cli3項目引入Typescript的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10
Vuex(多組件數(shù)據(jù)共享的Vue插件)搭建與使用
Vuex是實現(xiàn)組件全局狀態(tài)(數(shù)據(jù))管理的一種機制,可以方便的實現(xiàn)組件之間數(shù)據(jù)的共享,數(shù)據(jù)緩存等等,下面這篇文章主要給大家介紹了關于Vuex(多組件數(shù)據(jù)共享的Vue插件)搭建與使用的相關資料,需要的朋友可以參考下
2022-10-10
Vue組件基礎操作介紹
這篇文章主要介紹了Vue組件基礎操作，組件是vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進行直接的引用
2023-01-01
VUE使用vuex解決模塊間傳值問題的方法
本篇文章主要介紹了VUE使用vuex解決模塊間傳值問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
vue+element下日期組件momentjs轉換賦值問題解決
這篇文章主要介紹了vue+element下日期組件momentjs轉換賦值問題,記錄下使用momentjs轉換日期字符串賦值給element的日期組件報錯問題，需要的朋友可以參考下
2024-02-02