运行oax开源项目时webpack/vue-loader报相对模块找不到错误

看起来你在启动oax的开发服务器时遇到了模块缺失的编译错误，我来帮你一步步排查解决：

• 第一步：检查目标文件是否存在
  先顺着报错里的相对路径../../../plugins/dagre.js去确认文件位置：找到报错组件所在的目录，往上回溯三级目录，看看有没有plugins文件夹，里面是否真的有dagre.js。如果这个文件完全不存在，有两种可能：

  • 仓库克隆时部分文件丢失，你可以尝试重新克隆仓库；
  • 这个文件需要手动生成或从依赖包中引入，而非项目自带。

• 第二步：确认dagre依赖是否正确安装
  dagre本身是一个npm开源包，很多项目会直接通过包管理器安装而非本地存放。你可以先检查项目的package.json里有没有dagre依赖：

  • 如果没有，运行以下命令安装：

    npm install dagre --save
    

  • 如果已经存在依赖，试试清理缓存后重新安装，避免依赖损坏：

    rm -rf node_modules package-lock.json
    npm install
    

• 第三步：修正导入路径或配置webpack解析
  如果确认dagre是通过npm安装的，那组件里的相对路径导入大概率是错误的。找到报错组件中的导入语句，把：

  import dagre from '../../../plugins/dagre.js'
  

  改成直接从包导入：

  import dagre from 'dagre'
  

  另外，也可以检查项目的webpack配置文件（比如build/webpack.base.conf.js），看看resolve字段是否配置了正确的模块解析规则，比如是否添加了.js扩展名，或者有没有给plugins目录设置别名导致路径解析混乱。

• 第四步：查看项目文档或issue
  有些开源项目会有特殊的初始化步骤，比如需要执行特定脚本生成插件文件。你可以去项目的README文件里找找启动前的准备工作，或者看看仓库的issue区，有没有其他用户遇到过同样的问题，通常能找到现成的解决方案。

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