微信扫一扫 分享朋友圈

已有 228 人浏览分享

开启左侧

打包组件报错:Error: Cannot find module ‘vue/compiler-sfc‘怎么办

[复制链接]
228 0
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",
    ...
  }
}
解决方法
安装低版本的vue-loader
重新尝试打包,解决问题!

免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

66

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2022-11-27 23:43 , Gzip On, Redis On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。