打包组件报错:Error: Cannot find module ‘vue/compiler-sfc‘怎么办
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'
]
}
鍙戠幇鎶ラ敊鏂囦欢锛歸ebpack.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' },
]
}
]
}
};
閫氳繃鎵ц涓嬮潰浠g爜锛屾祴璇曞綋鍓嶆枃浠舵槸鍚﹀彲鎵ц锛
node webpack.config.js
鍙戠幇褰撳紩鍏ueLoaderPligin鏃舵姤閿
const VueLoaderPlugin = require('vue-loader/lib/plugin');
鏌ヨ鍙戠幇package.json涓璿ue-loader鐗堟湰鏄17.0.0锛
{
...
"devDependencies": {
...
"vue-loader": "^17.0.0",
...
}
}
瑙e喅鏂规硶
瀹夎浣庣増鏈殑vue-loader
閲嶆柊灏濊瘯鎵撳寘锛岃В鍐抽棶棰橈紒
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'
]
}
鍙戠幇鎶ラ敊鏂囦欢锛歸ebpack.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' },
]
}
]
}
};
閫氳繃鎵ц涓嬮潰浠g爜锛屾祴璇曞綋鍓嶆枃浠舵槸鍚﹀彲鎵ц锛
node webpack.config.js
鍙戠幇褰撳紩鍏ueLoaderPligin鏃舵姤閿
const VueLoaderPlugin = require('vue-loader/lib/plugin');
鏌ヨ鍙戠幇package.json涓璿ue-loader鐗堟湰鏄17.0.0锛
{
...
"devDependencies": {
...
"vue-loader": "^17.0.0",
...
}
}
瑙e喅鏂规硶
瀹夎浣庣増鏈殑vue-loader
閲嶆柊灏濊瘯鎵撳寘锛岃В鍐抽棶棰橈紒