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? }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
elementui时间/日期选择器选择禁用当前之前(之后)时间代码实例
当我们在进行网页开发时,通常需要用到一些日期组件来方便用户选择时间,其中element日期组件是一个非常好用的工具,这篇文章主要给大家介绍了关于elementui时间/日期选择器选择禁用当前之前(之后)时间的相关资料,需要的朋友可以参考下2024-02-02
VUE中的export default和export使用方法解析
export default和export都能导出一个模块里面的常量,函数,文件,模块等,在其它文件或模块中通过import来导入常量,函数,文件或模块。但是,在一个文件或模块中export,import可以有多个,export default却只能有一个。2022-12-12
vue+element下日期组件momentjs转换赋值问题解决
这篇文章主要介绍了vue+element下日期组件momentjs转换赋值问题,记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题,需要的朋友可以参考下2024-02-02


最新评论