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