前端学习(2736):重读vue电商网站46之执行build 时报错
?
Error: No module factory available for dependency type: CssDependency
解決辦法:
參考:解決webpack打包報錯 No module factory available for dependency type: CssDependency
在執行?build?命令期間移除所有的?console
babel-plugin-transform-remove-console 官方文檔傳送門
可以通過?vue-ui?面板,選擇開發依賴,然后輸入?babel-plugin-transform-remove-console?進行安裝
npm
Javascript
| npm install babel-plugin-transform-remove-console --save-dev |
安裝依賴之后,打開?babel.config.js文件,在?plugins?插件處,添加一個字符串,'transform-remove-console',如下圖所示位置。
Javascript
| module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['component',{libraryName: 'element-ui',styleLibraryName: 'theme-chalk'}],'transform-remove-console'] } |
上述設置好了之后,還存在一個問題,我們只需要在發布階段才會去除?console?,在開發和測試環境下如果去除了?console,對于我們調試方面不太好。因此,我們需要設置只在生產環境下去除?console。
通過上下兩個圖比較,我們可以發現,在開發環境下?mode?值為?development,而在生產環境下mode?值為?production。
因此,上述代碼就需要進行些微修改,如下所示:
Javascript
| // 項目發布階段需要用到的 babel 插件 const prodPlugins = [] // 判斷編譯模式為生產環境 if (process.env.NODE_ENV === 'production') {prodPlugins.push('transform-remove-console') }module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['component',{libraryName: 'element-ui',styleLibraryName: 'theme-chalk'}],...prodPlugins] } |
總結
以上是生活随笔為你收集整理的前端学习(2736):重读vue电商网站46之执行build 时报错的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端学习(2671): vue3.0脚手
- 下一篇: 前端学习(2687):重读vue电商网站