淺談vue-cli5關(guān)于yarn的一個(gè)小坑
問題
昨天有小伙伴下了我的 DEMO之后反映運(yùn)行報(bào)錯(cuò)。
因?yàn)檫@個(gè)項(xiàng)目環(huán)境我測(cè)試過許多次,不管是npm
還是yarn
都能正常運(yùn)行,所以聽到運(yùn)行報(bào)錯(cuò)時(shí)下意識(shí)地就認(rèn)為是依賴沒有安裝成功的問題,建議他配一個(gè)淘寶鏡像。
當(dāng)他把報(bào)錯(cuò)貼上來的時(shí)候,我發(fā)現(xiàn)原來真不是依賴的問題,vue-cli
拋出了錯(cuò)誤如下:
Error: The project seems to require yarn but it's not installed.
解決方案
報(bào)錯(cuò)信息已經(jīng)把原因說的很清楚了:這個(gè)項(xiàng)目可能需要yarn但是它并沒有安裝
。解決方案就我所知有兩種:
- 安裝
yarn
- 刪掉
yarn.lock
文件
親測(cè)這兩種方法都能解決問題,但是正常的多人協(xié)作項(xiàng)目肯定不能用第二種方法,真要這么干了就等著被批斗吧。
原因
問題很快就解決了,但是令我疑惑的是,同樣的依賴如果沒有yarn.lock
文件項(xiàng)目運(yùn)行項(xiàng)目完全是 OK 的。這說明壓根不需要yarn
,那為什么vue-cli
會(huì)認(rèn)為需要yarn
呢?
定位后看到錯(cuò)誤是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 }
簡(jiǎn)單來說,在development
環(huán)境下,調(diào)用checkYarn
方法后:
- 先執(zhí)行
hasProjectYarn
方法,通過path.join
生成一個(gè)目標(biāo)路徑,例如:D:\GitCode\vue2-typescript-starter\yarn.lock
。 - 再通過
fs.existsSync
方法來檢測(cè)這個(gè)路徑是否真實(shí)存在。若存在,則調(diào)用hasYarn
方法。 hasYarn
方法檢查是否安裝了yarn
,若沒有,則拋出錯(cuò)誤The project seems to require yarn but it's not installed.
中斷程序。
大致過程便是如此,如果我對(duì)細(xì)節(jié)理解不到位,還望指正。
到此這篇關(guān)于淺談vue-cli5關(guān)于yarn的一個(gè)小坑的文章就介紹到這了,更多相關(guān)vue-cli5 yarn內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Electron自動(dòng)更新失效報(bào)錯(cuò)Error:?Object?has?been?destroyed的問題解決
本文主要講解如何解決?Error:?Object?has?been?destroyed?這個(gè)?Electron?中最常見的問題,以及?Electron?自動(dòng)更新的流程,文中通過代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2024-01-01vue webpack打包后圖片路徑錯(cuò)誤的完美解決方法
這篇文章主要介紹了vue webpack打包后圖片路徑錯(cuò)誤的解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12vue項(xiàng)目在安卓低版本機(jī)顯示空白的原因分析(兩種)
本文給大家?guī)韛ue項(xiàng)目在安卓低版本機(jī)顯示空白的原因分析,根據(jù)各自需求給大家?guī)砹藘煞N原因分析,大家可以參考下2018-09-09vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí)
這篇文章主要介紹了vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10vue3+vite自定義封裝vue組件發(fā)布到npm包的全過程
當(dāng)市面上主流的組件庫不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫,下面這篇文章主要給大家介紹了關(guān)于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關(guān)資料,需要的朋友可以參考下2022-09-09vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù)的方法
本文主要介紹了vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Vue2.x Todo之自定義指令實(shí)現(xiàn)自動(dòng)聚焦的方法
我們希望用戶雙擊 todo 進(jìn)入編輯狀態(tài)后輸入框自動(dòng)獲取焦點(diǎn),而不是需要先手動(dòng)點(diǎn)一下。這篇文章主要介紹了Vue 2.x Todo之自定義指令實(shí)現(xiàn)自動(dòng)聚焦,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2019-01-01