浅谈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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 通过npm或yarn自动生成vue组件的方法示例

    通过npm或yarn自动生成vue组件的方法示例

    不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.vue文件,然后写template.script.style这些东西,如果是公共组件,是不是还要新建一个index.js用来导出vue组件.虽然有vscode有代码片段能实现自动补全,但还是很麻烦,今天灵活运用scripts工作流,自动生成vue文件和目录. 实践步骤 安装一下chalk,这个插件能让我们的控制台输出语句有各种颜色区分 npm install chalk --save-dev yarn add chalk --s

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

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

    目录 问题 解决方案 原因 问题 昨天有小伙伴下了我的 DEMO之后反映运行报错. 因为这个项目环境我测试过许多次,不管是npm还是yarn都能正常运行,所以听到运行报错时下意识地就认为是依赖没有安装成功的问题,建议他配一个淘宝镜像. 当他把报错贴上来的时候,我发现原来真不是依赖的问题,vue-cli抛出了错误如下: Error: The project seems to require yarn but it's not installed. 解决方案 报错信息已经把原因说的很清楚了:这个项目

  • 浅谈vue的第一个commit分析

    为什么写这篇vue的分析文章? 对于天资愚钝的前端(我)来说,阅读源码是件不容易的事情,毕竟有时候看源码分析的文章都看不懂.每次看到大佬们用了1-2年的vue就能掌握原理,甚至精通源码,再看看自己用了好几年都还在基本的使用阶段,心中总是羞愧不已.如果一直满足于基本的业务开发,怕是得在初级水平一直待下去了吧.所以希望在学习源码的同时记录知识点,可以让自己的理解和记忆更加深刻,也方便将来查阅. 目录结构 本文以vue的第一次 commit a879ec06 作为分析版本 ├── build │ └─

  • 浅谈Vue父子组件和非父子组件传值问题

    本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat

  • 浅谈Vue.js

    vue.js的总体评价"简单却不失优雅,小巧而不乏大匠" Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJs,下面我会将Vue与Angular(Angular 1.0+版本)做一些简单的比较. Vue的主要特点就和它官网(http://cn.vuejs.org/)所介绍的那样: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (

  • 浅谈Vue.js 1.x 和 2.x 实例的生命周期

    浅谈Vue.js 1.x 和 2.x 实例的生命周期

    在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x 实例的生命周期图示: Vue.js 1.x 的生命周期钩子 1. init 在实例开始初始化时同步调用.此时数据观测.事件和Watcher都尚未初始化. 2. created 在实例化创建之后同步调用.此时实例已经结束解析选项,已建立:数据绑定.计算属性.方法.Watcher/事件回调,但是还没有开始DOM编译,$el还不存在. 3. b

  • 浅谈vue的iview列表table render函数设置DOM属性值的方法

    如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属

  • 浅谈vue的踩坑路

    ------>axios模拟get json一直拿不到文件,先把data放到根目录,再去dev-server.js(就是npm执行的那个文件)里面设置静态资源访问路径app.use('/data',express.static('./data')) ... app.use(hotMiddleware) // serve pure static assets var staticPath = path.posix.join(config.dev.assetsPublicPath, config.d

  • 浅谈vue中改elementUI默认样式引发的static与assets的区别

    浅谈vue中改elementUI默认样式引发的static与assets的区别

    首先从这说起 vue项目中的elementUI的默认样式怎么改 由于elementUI的样式太单调,比如这个slider滑块 elementUI中的API是没办法改变这个slider的颜色的,可是老板喜欢很黄,非要用yellow色.

  • 浅谈VUE监听窗口变化事件的问题

    Vuejs 本身就是一个 MVVM 的框架.但是在监听 window 上的 事件 时,往往会显得 力不从心. 比如 这次是 window.resize恩,我做之前也是百度了一下.看到大家伙都为这个问题而发愁. 问题: 今天我也 遇到了这样一个问题, 是关于canvas 自适应. 根据窗口的变化去变化 canvas 的宽度备注: 重要的问题说三遍 解决 框架内的bug 先说 框架 版本 版本 版本 (这里用的 Vue 2.x .ES6) 解决方案: 第一步: 先在 data 中去 定义 一个记录宽

  • 浅谈vue单一组件下动态修改数据时的全部重渲染

    今天在学习vue的过程中,发现一个有趣的现象. 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定.可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化 这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如.是不是只要有一个节点变了,node都重新进行了加载??? 我想这其中的缘由必定

随机推荐