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? }

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

您可能感興趣的文章: