Vue+Vuetify项目执行npm start build命令编译失败求助

嘿，我之前也碰到过几乎一模一样的情况——按照Vuetify官网指引用vue-cli创建的项目，开发环境跑起来完全没问题，一执行npm run build就卡在94%资源优化阶段报错找不到路径。给你几个我亲测有效的排查和解决方向：

• 先确认报错路径是否存在
  先去检查报错信息里提到的/Users/.../Projects/my-proto/build/...这个具体路径，看看对应的文件夹是不是真的存在。有时候webpack编译时需要的临时子目录没自动生成，就会触发这种找不到依赖的错误。如果不存在，手动创建这个目录再重新编译试试。

• 清理缓存后重新安装依赖
  很多时候这种诡异的编译问题都是依赖缓存或者安装不完整导致的。你可以按这个步骤来：

  1. 执行npm cache clean --force清理npm全局缓存
  2. 删除项目根目录下的node_modules文件夹和package-lock.json文件
  3. 重新执行npm install安装完整依赖
  4. 最后再跑npm run build试试

• 检查webpack配置里的路径设置
  打开项目根目录的config/index.js文件，查看build配置区块里的assetsRoot、assetsSubDirectory这些路径参数，有没有拼写错误或者指向了不存在的文件夹。比如如果assetsSubDirectory设成了static/dist但实际没这个文件夹，就会在资源优化阶段出错。

• 排查文件权限问题（针对Mac/Linux用户）
  如果你的项目是在Mac或者Linux系统上，有可能是build目录的权限不足，导致webpack无法写入编译后的文件。可以试试给项目目录添加足够的权限：

  sudo chmod -R 755 /Users/.../Projects/my-proto
  

  执行完再重新编译试试。

• 检查模板依赖的兼容性
  你用的vuetifyjs/webpack模板是比较早期的脚手架模板，可能里面的webpack配置和新版本的npm依赖存在兼容性问题。可以看看项目package.json里的webpack、vue-loader这些依赖的版本，尝试升级到和当前Vue、Vuetify版本匹配的稳定版，再重新编译。

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