網站首頁 Vue 正文
vue組件庫搭建過程中使用webpack打包組件時報錯,報錯內容如下:
Error: Cannot find module 'vue/compiler-sfc'
Require stack:
- D:\vue2\moon-ui\node_modules\vue-loader\dist\index.js
- D:\vue2\moon-ui\webpack.config.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (D:\vue2\moon-ui\node_modules\vue-loader\dist\index.js:8:24)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'D:\\vue2\\moon-ui\\node_modules\\vue-loader\\dist\\index.js',
'D:\\vue2\\moon-ui\\webpack.config.js'
]
}
發現報錯文件:webpack.config.js
const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const glob = require("glob");
const list = {};
?
async function makeList(dirPath, list) {
const files = glob.sync(`${dirPath}/**/index.js`)
for (const file of files) {
const component = file.split(/[/.]/)[2];
list[component] = `./${file}`;
}
}
makeList("components/lib", list)
module.exports = {
entry: list,
output: {
filename: '[name].umd.js',
path: path.resolve(__dirname, "dist"),
library: 'mui',
libraryTarget: 'umd'
},
plugins: [
new VueLoaderPlugin(),
],
module: {
rules: [
{
test: /\.vue$/,
use: [
{ loader: 'vue-loader' },
]
}
]
}
};
通過執行下面代碼,測試當前文件是否可執行:
node webpack.config.js
發現當引入VueLoaderPligin時報錯
const VueLoaderPlugin = require('vue-loader/lib/plugin');
查詢發現package.json中vue-loader版本是17.0.0:
{
...
"devDependencies": {
...
"vue-loader": "^17.0.0",
...
}
}
解決方法
npm i vue-loader@15 -D
安裝低版本的vue-loader
重新嘗試打包,解決問題!
原文鏈接:https://blog.csdn.net/xuelong5201314/article/details/122843874
相關推薦
- 2022-11-17 Python?pyecharts模塊安裝與入門教程_python
- 2022-10-02 iOS實現可拖動的浮動菜單_IOS
- 2024-01-13 Maven項目導入第三方jar包
- 2023-12-13 Excel統計某個關鍵字出現的次數
- 2021-11-06 C/C++?Qt?StringListModel?字符串列表映射組件詳解_C 語言
- 2022-07-10 oracle中的session
- 2022-11-10 Android光線傳感器使用方法詳解_Android
- 2022-12-01 .NET?Core部署為Windows服務的詳細步驟_實用技巧
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支