Vue组件打包后引入报错：Module not found: Can't resolve 'messagecomponent'

下面是几种常见的导致这个错误的原因以及对应的排查方向：

• 组件项目的package.json入口配置错误
  你的组件项目build出dist后，必须在自身的package.json里通过main字段指定正确的入口文件路径。比如如果dist里生成的是messagecomponent.umd.js，那组件项目的package.json里要加上：

  "main": "dist/messagecomponent.umd.js"
  

  要是没配置这个字段，或者路径写错（比如指向了src里的文件，或者dist里不存在的文件名），依赖引入时就会找不到模块。同时还要确认组件项目package.json的name字段确实是messagecomponent——这是你在另一个项目里引入时用的模块名，名字错了也会报错。

• 本地依赖未正确安装/链接
  如果是通过本地文件路径引入的组件（比如package.json里写的是"messagecomponent": "file:../your-component-project"），要确保已经在使用项目里执行了npm install，或者用npm link把组件项目链接到全局后再在使用项目里npm link messagecomponent。如果路径写错，或者链接过程出问题，也会导致找不到模块。

• 组件项目的build配置不符合模块导出要求
  用Vue CLI构建组件库时，需要在vue.config.js里配置正确的library参数，确保构建产物能被其他项目作为模块引入。比如：

  module.exports = {
    configureWebpack: {
      output: {
        library: 'messagecomponent',
        libraryTarget: 'umd'
      }
    }
  }
  

  要是没配置这些，build出来的文件可能只是普通的浏览器端脚本，无法被Node.js的模块解析器识别，自然会出现找不到模块的错误。

• 引入语句的拼写/路径错误
  检查使用项目里的import语句，是不是把模块名拼错了？比如写成了MessageComponent而不是messagecomponent，或者加了多余的路径后缀。要确保引入的模块名和组件项目package.json的name字段完全一致。

• 构建产物文件名不匹配
  查看组件项目dist目录下的实际文件名，是不是和你在main字段里配置的一致？比如如果build后生成的是app.umd.js，那main字段指向dist/messagecomponent.umd.js肯定找不到文件。这种情况要么改main字段的路径，要么在vue.config.js里配置output.filename指定正确的输出文件名。

内容的提问来源于stack exchange，提问作者데비앙