最近因?yàn)楣ぷ餍枰_(kāi)始學(xué)習(xí)vue，于是在github上找了一個(gè)star數(shù)比較高的項(xiàng)目 ant-design-vue-pro 準(zhǔn)備練手。項(xiàng)目克隆下來(lái)后，用 vscode 打開(kāi)工程，并且使用了 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.

剛開(kāi)始看到這個(gè)報(bào)錯(cuò)表示心情還是很平靜的，畢竟大風(fēng)大浪見(jiàn)得多了，首先想到的是不是依賴包沒(méi)有安裝成功？

于是把 node_modules 目錄和 yarn.lock 文件刪了重新裝依賴包，重新啟動(dòng)發(fā)現(xiàn)依然報(bào)錯(cuò)。思考了下開(kāi)始懷疑是不是使用 yarn 安裝依賴包的問(wèn)題，于是換了 npm 和 pnpm 進(jìn)行依賴包的安裝，結(jié)果依然是啟動(dòng)報(bào)錯(cuò)。

嘿嘿，到這里其實(shí)就開(kāi)始覺(jué)得這個(gè)問(wèn)題不簡(jiǎn)單了，懷疑這么嚴(yán)重的問(wèn)題肯定不是我一個(gè)人遇到過(guò)，經(jīng)過(guò)一番Google檢索，發(fā)現(xiàn)確實(shí)有人遇到過(guò)類似的問(wèn)題，提出了如下幾種解決方法：

• 刪除 node_modules 和 lock 文件，重新安裝依賴包
• 使用npm安裝依賴包，不要使用yarn
• 既然報(bào)錯(cuò) vue-cli-service 這個(gè)命令找不到，那就全局安裝 npm install -g vue-cli-service

方法一和方法二上面其實(shí)已經(jīng)嘗試過(guò)了，是不行的，方法三雖然可能可行，但是顯然全局安裝 vue-cli-service 不是最優(yōu)解。

于是開(kāi)始嘗試自己思考為什么啟動(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 是這么寫(xiě)的：

{
  "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í)沒(méi)有發(fā)現(xiàn) vue-cli-service 可執(zhí)行性文件。

現(xiàn)在就可以明確報(bào)錯(cuò)的原因就是 vue-cli-service 命令不存在，也就是 @vue/cli-service 這個(gè)包沒(méi)有安裝成功(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)在的問(wèn)題就簡(jiǎn)化為：

在package.json中的devDependencies字段中指定的依賴包，在什么情況下會(huì)沒(méi)有安裝成功？

這個(gè)問(wèn)題在 npm 文檔 中找到了解答：

• "dependencies": Packages required by your application in production.
• "devDependencies": Packages that are only needed for local development and testing.

文檔中明確了 devDependencies 中指定的依賴只有本地開(kāi)發(fā)環(huán)境或者測(cè)試的時(shí)候才會(huì)安裝，生產(chǎn)環(huán)境下只安裝 dependencies 中指定的依賴。

現(xiàn)在問(wèn)題又進(jìn)一步縮小為：

npm，如何知道包是安裝在開(kāi)發(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 in package.json.

With the --production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies. To install all modules listed in both dependencies and devDependencies when NODE_ENV environment variable is set to production, you can use --production=false.

上面解釋了，在安裝依賴包的時(shí)候，通過(guò) --production 參數(shù)或者 NODE_ENV 環(huán)境變量來(lái)區(qū)分當(dāng)前處于開(kāi)發(fā)模式還是處于生產(chǎn)模式。

到這里，問(wèn)題已經(jīng)很明確了，就是環(huán)境變量導(dǎo)致 ant-design-vue-pro 工程只有 dependencies 的依賴被安裝了，而 devDependencies 的依賴被忽略了。

這個(gè)時(shí)候，我突然回想起一個(gè)細(xì)節(jié)，每次當(dāng)我從 vscode 中打開(kāi)終端(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 指定的依賴都沒(méi)有被安裝！

說(shuō)到這里，其實(shí)這個(gè)問(wèn)題就徹底被定位了，解決方法很簡(jiǎn)單，就是把環(huán)境變量設(shè)置為 NODE_ENV=development 重新安裝一下依賴就能正常裝包了。

試了一下，果然一把成功，perfect ！又看到了熟悉的vue啟動(dòng)畫(huà)面，嘿嘿，晚上又可以給自己加個(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)文章希望大家以后多多支持腳本之家！

最新評(píng)論