浅谈vue-cli5关于yarn的一个小坑

更新时间：2022年05月23日 09:39:55 作者：前端无声

本文主要介绍了vue-cli5关于yarn的一个小坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

问题

昨天有小伙伴下了我的 DEMO之后反映运行报错。

因为这个项目环境我测试过许多次，不管是npm还是yarn都能正常运行，所以听到运行报错时下意识地就认为是依赖没有安装成功的问题，建议他配一个淘宝镜像。

当他把报错贴上来的时候，我发现原来真不是依赖的问题，vue-cli抛出了错误如下：

Error: The project seems to require yarn but it's not installed.

解决方案

报错信息已经把原因说的很清楚了：这个项目可能需要yarn但是它并没有安装。解决方案就我所知有两种：

安装yarn
删掉yarn.lock文件

亲测这两种方法都能解决问题，但是正常的多人协作项目肯定不能用第二种方法，真要这么干了就等着被批斗吧。

原因

问题很快就解决了，但是令我疑惑的是，同样的依赖如果没有yarn.lock文件项目运行项目完全是 OK 的。这说明压根不需要yarn，那为什么vue-cli会认为需要yarn呢？

定位后看到错误是node_modules\@vue\cli-shared-utils\lib\env.js中的checkYarn方法抛出的，具体代码如下：

exports.hasYarn = () => {
  if (process.env.VUE_CLI_TEST) {
    return true
  }
  if (_hasYarn != null) {
    return _hasYarn
  }
  try {
    execSync('yarn --version', { stdio: 'ignore' })
    return (_hasYarn = true)
  } catch (e) {
    return (_hasYarn = false)
  }
}

exports.hasProjectYarn = (cwd) => {
  if (_yarnProjects.has(cwd)) {
    return checkYarn(_yarnProjects.get(cwd))
  }

  const lockFile = path.join(cwd, 'yarn.lock')
  const result = fs.existsSync(lockFile)
  _yarnProjects.set(cwd, result)
  return checkYarn(result)
}

function checkYarn (result) {
  if (result && !exports.hasYarn()) throw new Error(`The project seems to require yarn but it's not installed.`)
  return result
}

简单来说，在development环境下，调用checkYarn方法后：

先执行hasProjectYarn方法，通过path.join生成一个目标路径，例如：D:\GitCode\vue2-typescript-starter\yarn.lock。
再通过fs.existsSync方法来检测这个路径是否真实存在。若存在，则调用hasYarn方法。
hasYarn方法检查是否安装了yarn，若没有，则抛出错误The project seems to require yarn but it's not installed.中断程序。

大致过程便是如此，如果我对细节理解不到位，还望指正。

到此这篇关于浅谈vue-cli5关于yarn的一个小坑的文章就介绍到这了,更多相关vue-cli5 yarn内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3 实现牙位图选择器的实例代码
这篇文章主要介绍了vue3 实现牙位图选择器的实例代码,代码简单易懂,需要的朋友参考下吧
2025-04-04
在Nginx上部署前端Vue项目的详细步骤(超级简单!)
这篇文章主要介绍了在Nginx上部署前端Vue项目的详细步骤,Nginx是一款高效的HTTP和反向代理Web服务器,作为开源软件,Nginx以其高性能、可扩展性和灵活性广泛应用于Web架构中,文中将步骤介绍的非常详细,需要的朋友可以参考下
2024-10-10
Vue3.2中setup语法糖的使用教程分享
这篇文章主要为大家详细介绍了Vue3.2中setup语法糖的具体使用方法，文中的示例代码讲解详细，对我们深入了解Vue有一定的帮助，需要的可以参考一下
2023-05-05
关于SpringBoot与Vue交互跨域问题解决方案
最近在利用springboot+vue整合开发一个前后端分离的个人博客网站，所以这一篇总结一下在开发中遇到的一个问题，关于解决在使用vue和springboot在开发前后端分离的项目时，如何解决跨域问题。在这里分别分享两种方法，分别在前端vue中解决和在后台springboot中解决。
2021-10-10
vue打印浏览器页面功能的两种实现方法
这篇文章主要给大家介绍了关于vue打印浏览器页面功能的两种实现方法,这个功能其实也是自己学习到的,做完也有一段时间了,一直想记录总结一下,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-04-04
vue-cli3添加模式配置多环境变量的方法
这篇文章主要介绍了vue-cli3添加模式配置多环境变量的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
vue.js实现h5机器人聊天（测试版）
这篇文章主要为大家详细介绍了vue.js实现h5机器人聊天测试版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07
关闭Vue计算属性自带的缓存功能方法
下面小编就为大家分享一篇关闭Vue计算属性自带的缓存功能方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue3的组合式API中使用ref()函数的例子
你们是否听说过Vue3的组合式API？它可是Vue3的新玩法，把以前的Vue2组件函数转化为了函数组件。好了，今天我要和大家分享的是如何在组合式API中使用ref()函数，感兴趣的朋友跟随小编一起看看吧
2023-06-06
vue项目打包部署跨域的实现步骤
在前端 Vue 项目打包后，如果需要访问另一个域名下的接口，由于浏览器的同源策略限制，会出现跨域问题，本文就介绍一下vue项目打包部署跨域的实现步骤，感兴趣的可以了解一下
2023-05-05

浅谈vue-cli5关于yarn的一个小坑

目录

问题

解决方案

原因

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具