构建Vue Web Component时模块解析错误的原因咨询

错误1：Can't resolve 'vue-loader/lib/runtime/componentNormalizer' #

原因 #

• 全局安装的@vue/cli-service和项目本地的vue-loader、vue-template-compiler版本不兼容，导致webpack找不到对应模块
• vue-loader依赖未正确安装，或依赖缓存出现异常

解决建议 #

• 优先使用项目本地cli命令执行构建：在项目根目录运行npx vue-cli-service build --target wc --name my-component './src/main.js'，避免全局与本地依赖版本冲突
• 若需保留全局cli，确保全局@vue/cli-service和项目内vue-loader、vue-template-compiler版本统一（比如都用vue-cli 4.x或5.x系列）
• 清理依赖缓存后重装：删除node_modules、package-lock.json（或yarn.lock），重新执行npm install/yarn install
• 手动安装匹配版本的vue-loader：执行npm install vue-loader@对应版本 --save-dev，版本需与vue-template-compiler、@vue/cli-service保持一致

错误2：Can't resolve '~root/src/components/HelloWorld.vue?shadow' #

原因 #

• ~root路径别名未在webpack配置中定义，webpack无法识别该前缀
• 使用?shadow后缀启用Shadow DOM，但当前vue-cli配置未适配该后缀的文件处理逻辑

解决建议 #

• 在vue.config.js中添加~root别名配置：

  const path = require('path');
  module.exports = {
    configureWebpack: {
      resolve: {
        alias: {
          '~root': path.resolve(__dirname, './')
        }
      }
    }
  }
  

• 若使用Shadow DOM，确保安装了对应支持插件（如vue-shadow-dom），并在配置中启用对?shadow后缀的处理
• 替换~root为相对路径：根据文件实际位置，把~root/src/components/HelloWorld.vue?shadow改成./src/components/HelloWorld.vue?shadow类的相对路径写法
• 检查main.js中组件引入代码，确认路径拼写无误

内容的提问来源于stack exchange，提问作者hmn99