關(guān)于vue-cli-service:command?not?found報(bào)錯(cuò)引發(fā)的實(shí)戰(zhàn)案例
最近因?yàn)楣ぷ餍枰?,開始學(xué)習(xí)vue,于是在github上找了一個(gè)star數(shù)比較高的項(xiàng)目 ant-design-vue-pro 準(zhǔn)備練手。項(xiàng)目克隆下來后,用 vscode
打開工程,并且使用了 vscode
自帶的終端安裝了依賴包,但是準(zhǔn)備執(zhí)行 yarn serve
啟動(dòng)工程的時(shí)候卻意外的拋出了一個(gè)錯(cuò)誤:
$ vue-cli-service serve /bin/sh: vue-cli-service: command not found error Command failed with exit code 127.
剛開始看到這個(gè)報(bào)錯(cuò)表示心情還是很平靜的,畢竟大風(fēng)大浪見得多了,首先想到的是不是依賴包沒有安裝成功?
于是把 node_modules
目錄和 yarn.lock
文件刪了重新裝依賴包,重新啟動(dòng)發(fā)現(xiàn)依然報(bào)錯(cuò)。思考了下開始懷疑是不是使用 yarn
安裝依賴包的問題,于是換了 npm
和 pnpm
進(jìn)行依賴包的安裝,結(jié)果依然是啟動(dòng)報(bào)錯(cuò)。
嘿嘿,到這里其實(shí)就開始覺得這個(gè)問題不簡(jiǎn)單了,懷疑這么嚴(yán)重的問題肯定不是我一個(gè)人遇到過,經(jīng)過一番Google檢索,發(fā)現(xiàn)確實(shí)有人遇到過類似的問題,提出了如下幾種解決方法:
- 刪除 node_modules 和 lock 文件,重新安裝依賴包
- 使用npm安裝依賴包,不要使用yarn
- 既然報(bào)錯(cuò) vue-cli-service 這個(gè)命令找不到,那就全局安裝 npm install -g vue-cli-service
方法一和方法二上面其實(shí)已經(jīng)嘗試過了,是不行的,方法三雖然可能可行,但是顯然全局安裝 vue-cli-service
不是最優(yōu)解。
于是開始嘗試自己思考為什么啟動(dòng)報(bào)錯(cuò)?
首先需要弄明白執(zhí)行 yarn serve
到最終腳手架工程啟動(dòng)都執(zhí)行了哪些操作?
當(dāng)我們?cè)诠こ棠夸浵碌慕K端執(zhí)行 yarn serve
時(shí),首先會(huì)去工程根目錄下的 package.json
中的 scripts
字段查詢是否有可執(zhí)行的腳本,ant-design-vue-pro 是這么寫的:
{ "scripts": { "serve": "vue-cli-service serve" } }
當(dāng)運(yùn)行 yarn serve
就相當(dāng)于執(zhí)行的是 vue-cli-service serve
,這個(gè)時(shí)候 nodejs
會(huì)嘗試在 node_modules
下的 .bin
目錄下查詢 vue-cli-service
可執(zhí)行性文件,如果找不到就會(huì)去全局安裝的 node_modules
下查詢可執(zhí)行文件,如果還是找不到的話就會(huì)報(bào)錯(cuò) command not found
。
我在 ant-design-vue-pro 的node_modules/.bin
下確實(shí)沒有發(fā)現(xiàn) vue-cli-service
可執(zhí)行性文件。
現(xiàn)在就可以明確報(bào)錯(cuò)的原因就是 vue-cli-service
命令不存在,也就是 @vue/cli-service
這個(gè)包沒有安裝成功(vue-cli-service命令是由@vue/cli-service這個(gè)包安裝后引入的)。
于是查看了工程下的 package.json
文件,發(fā)現(xiàn)在 package.json
的 devDependencies
字段中指定了 @vue/cli-service
:
{ "devDependencies": { "@vue/cli-service": "~5.0.8" } }
現(xiàn)在的問題就簡(jiǎn)化為:
在package.json中的devDependencies字段中指定的依賴包,在什么情況下會(huì)沒有安裝成功?
這個(gè)問題在 npm 文檔 中找到了解答:
- "dependencies": Packages required by your application in production.
- "devDependencies": Packages that are only needed for local development and testing.
文檔中明確了 devDependencies
中指定的依賴只有本地開發(fā)環(huán)境或者測(cè)試的時(shí)候才會(huì)安裝,生產(chǎn)環(huán)境下只安裝 dependencies
中指定的依賴。
現(xiàn)在問題又進(jìn)一步縮小為:
npm,如何知道包是安裝在開發(fā)環(huán)境還是生產(chǎn)環(huán)境?
繼續(xù)查看 npm 文檔,在 npm install 相關(guān)文檔 中我們發(fā)現(xiàn)一段解釋:
By default,
npm install
will install all modules listed as dependencies inpackage.json
.With the
--production
flag (or when theNODE_ENV
environment variable is set toproduction
), npm will not install modules listed indevDependencies
. To install all modules listed in bothdependencies
anddevDependencies
whenNODE_ENV
environment variable is set toproduction
, you can use--production=false
.
上面解釋了,在安裝依賴包的時(shí)候,通過 --production
參數(shù)或者 NODE_ENV
環(huán)境變量來區(qū)分當(dāng)前處于開發(fā)模式還是處于生產(chǎn)模式。
到這里,問題已經(jīng)很明確了,就是環(huán)境變量導(dǎo)致 ant-design-vue-pro 工程只有 dependencies
的依賴被安裝了,而 devDependencies
的依賴被忽略了。
這個(gè)時(shí)候,我突然回想起一個(gè)細(xì)節(jié),每次當(dāng)我從 vscode
中打開終端(PS:我的終端默認(rèn)使用的是zsh??)的時(shí)候,終端都會(huì)有一個(gè)如下的提示:
dotenv: found '.env' file. Source it? ([Y]es/[n]o/[a]lways/n[e]ver)
通常遇到這個(gè)提示的時(shí)候我不會(huì)很在意,一般都會(huì)選擇 Yes
,這樣如果我們的工程下存在 .env
文件,zsh
終端會(huì)自動(dòng)讀取環(huán)境變量,并設(shè)置到當(dāng)前環(huán)境中。
于是我趕緊查看了 ant-design-vue-pro 工程下的 .env
環(huán)境變量,果然看到了 NODE_ENV
的值被設(shè)置成了 production
??♀?。
NODE_ENV=production VUE_APP_PREVIEW=false VUE_APP_API_BASE_URL=/api
到這里其實(shí)就真相大白了 – 就是我使用的zsh終端惹的禍??。
終端啟動(dòng)的時(shí)候自動(dòng)解析了工程根目錄下的 .env
配置文件,配置文件里面恰巧又將 NODE_ENV
環(huán)境變量設(shè)置成了 production
,導(dǎo)致 package.josn
中 devDependencies
指定的依賴都沒有被安裝!
說到這里,其實(shí)這個(gè)問題就徹底被定位了,解決方法很簡(jiǎn)單,就是把環(huán)境變量設(shè)置為 NODE_ENV=development
重新安裝一下依賴就能正常裝包了。
試了一下,果然一把成功,perfect !又看到了熟悉的vue啟動(dòng)畫面,嘿嘿,晚上又可以給自己加個(gè)雞腿了??
yarn serve yarn run v1.18.0 $ vue-cli-service serve INFO Starting development server...
總結(jié)
到此這篇關(guān)于關(guān)于vue-cli-service:command not found報(bào)錯(cuò)引發(fā)的文章就介紹到這了,更多相關(guān)vue-cli-service:command not found報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2.0實(shí)現(xiàn)的tab標(biāo)簽切換效果(內(nèi)容可自定義)示例
這篇文章主要介紹了vue2.0實(shí)現(xiàn)的tab標(biāo)簽切換效果,結(jié)合實(shí)例形式分析了vue.js實(shí)現(xiàn)內(nèi)容可自定義的tab點(diǎn)擊切換功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02vue如何使用swiper插件修改左右箭頭的默認(rèn)樣式
這篇文章主要介紹了vue如何使用swiper插件修改左右箭頭的默認(rèn)樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令
Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09validate?注冊(cè)頁(yè)的表單數(shù)據(jù)校驗(yàn)實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了validate?注冊(cè)頁(yè)的表單數(shù)據(jù)校驗(yàn)實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue 實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能
這篇文章主要介紹了vue 實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁(yè)功能
當(dāng)今的Web開發(fā)趨勢(shì)中,前后端分離已經(jīng)成為一種流行的架構(gòu)模式,它將前端和后端的開發(fā)分離開來,使得前端和后端可以獨(dú)立進(jìn)行開發(fā)和部署,本文給大家介紹了Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁(yè)功能,需要的朋友可以參考下2024-06-06vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04