前言
filemanager-webpack-plugin插件的使用方法：vue-cli@3.0 直接打包成zip壓縮文件
正文
使用"npm i"命令安裝所有依賴，然后使用“npm run serve”命令運行本地服務器，但是不能正常啟動，報以下錯誤：

原因
項目使用了叫作filemanager-webpack-plugin的webpack插件，目的是為了在進行打包的時候，直接把打包結果dist文件夾壓縮，變成dist.zip文件。

調用代碼位于vue.config.js下：

const FileManagerPlugin = require('filemanager-webpack-plugin') module.exports = {configureWebpack: { plugins: [new FileManagerPlugin({ onEnd: {delete: [ './dist.zip',],archive: [ {source: './dist', destination: './dist.zip'},]}})]}};

代碼的本意是想在調用“npm run build”進行生產打包的時候，生成dist.zip壓縮包。

但是事實上發現，在運行“npm run serve”進行調試時，也會根據dist文件夾，去生成壓縮包。而如果是從git遠程庫新clone下來的代碼，默認是沒有dist文件夾的（一般項目都會在.gitignore里，把dist文件夾設為不推送到遠程庫），導致filemanager-webpack-plugin因找不到dist文件夾而報錯。
解決

mkdir: ['./dist']

即在生成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）多交流，就算不能從他人身上直接得到解決辦法，也許也能得到一絲靈感、或者能夠獲得另外一種視角。自己一人瞎想，可能就會一直在死胡同徘徊。
————————————————
原文鏈接：https://blog.csdn.net/TheJormangund/article/details/108435897

總結

以上是生活随笔為你收集整理的打包filemanager-webpack-plugin的报错和解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。