记⼀次vue-cli3下filemanager-webpack-plugin的报错和解决
//2022-01-05 更新
1）插件出新版本了，需要注意⼀些配置项字段差异。
2）有朋友指出了⼀个更好的⽅法。可以参见评论区
前⾔
附上⼀篇filemanager-webpack-plugin插件的使⽤⽅法：
因为对之前项⽬进⾏再次开发时，遇到了太多因维护引起的问题（满满的⼼智负担，导致San值严重下降。。( ′Д`)）。
所以想尝试⼀下，重新git clone⼀次某vue项⽬，想从⼆次开发者的视⾓去窥探，看流程能不能顺利。果不其然，出了问题。psp 2000
正⽂
项⽬是使⽤Vue-cli3建⽴的。之前本地的旧项⽬代码⼀直能够正常⼯作，但是重新clone⼀次之后，却报
了错。
把项⽬代码重新“git clone”下来后，使⽤"npm i"命令安装所有依赖，然后使⽤“npm run serve”命令运⾏本地服务器，但是不能正常启动，报以下错误：
原因
项⽬使⽤了叫作filemanager-webpack-plugin的webpack插件，⽬的是为了在进⾏打包的时候，直接把打包结果dist⽂件夹压缩，变成dist.zip⽂件。
调⽤代码位于fig.js下：
const FileManagerPlugin =require('filemanager-webpack-plugin')
configureWebpack:{
plugins:[
new FileManagerPlugin({
onEnd:{
delete:[
'./dist.zip',
],
archive:[
{source:'./dist', destination:'./dist.zip'},
2022高考人数西湖十景有哪些]
}
})
]
}
};
代码的本意是想在调⽤“npm run build”进⾏⽣产打包的时候，⽣成dist.zip压缩包。
但是事实上发现，在运⾏“npm run serve”进⾏调试时，也会根据dist⽂件夹，去⽣成压缩包。⽽如果是从git远程库新clone下来的代码，默认是没有dist⽂件夹的（⼀般项⽬都会在.gitignore⾥，把dist⽂件夹设为不推送到远程库），导致filemanager-webpack-plugin因不到dist⽂件夹⽽报错。
解决
在插件的onEnd钩⼦⾥最前⾯，加⼀句：
mkdir:['./dist']
变成这样：
const FileManagerPlugin =require('filemanager-webpack-plugin')
configureWebpack:{
彦怎么读plugins:[
new FileManagerPlugin({
onEnd:{
mkdir:['./dist'],// 新加的⼀句代码
delete:[
'./dist.zip',
],
archive:[
{source:'./dist', destination:'./dist.zip'},
著字组词]
}
})
]
}
};
浸组词拼音即在⽣成dist.zip压缩包之前，先⾃动创建⼀个空的dist⽂件夹，防⽌因为不到dist⽂件夹⽽报错。这样做，也不会对⽣产打包造成影响，此时的dist就是包含了打包内容的正常⽂件夹了。
感觉以后在使⽤这个插件进⾏压缩时，不能照抄⽹上的教程了，得使⽤⼀下这个改进后的配置。
当然如果有更好的⽅法，欢迎指教。
想出解决⽅法的思维过程
在出现这个报错时，曾经⼀度怀疑是安装依赖出了问题。因为旧项⽬⽂件夹是能正常本地运⾏的，咋眼看去新旧项⽬⽂件夹唯⼀的不同，就是node_modules⽂件夹了。
但是⽆论是使⽤“npm i”进⾏正常安装，还是使⽤“npm ci”进⾏锁版安装，全都没⽤。最后被逼⽆奈，只好把旧项⽬⽂件夹⾥的
node_modules⽂件夹，直接拷贝到新项⽬⽂件夹⾥，但是依然报出同样的错误。
在与同事⼀起交流探讨之后，不经意把注意⼒放到了dist.zip压缩包上。
因为我们是从远程库新clone下来的项⽬，dist.zip这个压缩⽂件，肯定不是我们之前推送到远程库的，那么它到底是怎么产⽣的？
把它删掉之后，重新运⾏“npm run serve”命令，发现它是在这个过程产⽣的。于是我开始逐渐把视⾓放到了“安装”之外：依赖报错，难道⼀定就是依赖安装得不对吗？当然不是，在调⽤依赖的时候，如果我们配置不当或者调⽤不当，不是也会报错吗？
（只是我们脑海中⼀直有种固有观念：能够被⼤众⼴泛使⽤的东西，⼀定做了异常处理，就算不能达到我们预想的效果，但⾄少也不可能报错）
这样⼀来原因就逐渐明朗了。既然有压缩，那必然要存在原⽂件夹，如果原⽂件夹不存在，是不是就会报错？为新项⽬⼿动添加了⼀个dist ⽂件夹后，再执⾏“npm run serve”，果然不报错了。
那么解决办法也就清楚了，同样利⽤filemanager-webpack-plugin插件，我们就每次在压缩前，先给它⽣成⼀个dist⽂件夹，以防不测就好了。
后⽂
按理说 在运⾏“npm run serve” 的时候，我们并不想打包，这时不应该要去做压缩dist的操作。⽹上查到的不少相关配置教程有问题，有些违反我们的常理和预期。
这并⾮插件本⾝的错，⽽在于我们使⽤者使⽤得不当。如果我们对webpack以及其插件有更深⼊的了解的话，⼤概能配置出更好的⾃动化构建流程吧。
从解决这个异常的过程中，⼤概学到了：
1）依赖报错，不要光认为是“安装”这⼀过程出了问题。配置和使⽤也可能是导致异常的原因。
2）多交流，就算不能从他⼈⾝上直接得到解决办法，也许也能得到⼀丝灵感、或者能够获得另外⼀种视⾓。⾃⼰⼀⼈瞎想，可能就会⼀直在死胡同徘徊。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论