欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關于vue-cli-service:command?not?found報錯引發(fā)的實戰(zhàn)案例

 更新時間:2023年02月07日 10:37:41   作者:astonishqft  
這篇文章主要給大家介紹了關于vue-cli-service:command?not?found報錯引發(fā)的相關資料,文中通過實例代碼將解決的過程介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

最近因為工作需要,開始學習vue,于是在github上找了一個star數(shù)比較高的項目 ant-design-vue-pro 準備練手。項目克隆下來后,用 vscode 打開工程,并且使用了 vscode 自帶的終端安裝了依賴包,但是準備執(zhí)行 yarn serve 啟動工程的時候卻意外的拋出了一個錯誤:

$ vue-cli-service serve 
/bin/sh: vue-cli-service: command not found
error Command failed with exit code 127.

剛開始看到這個報錯表示心情還是很平靜的,畢竟大風大浪見得多了,首先想到的是不是依賴包沒有安裝成功?

于是把 node_modules 目錄和 yarn.lock 文件刪了重新裝依賴包,重新啟動發(fā)現(xiàn)依然報錯。思考了下開始懷疑是不是使用 yarn 安裝依賴包的問題,于是換了 npmpnpm 進行依賴包的安裝,結(jié)果依然是啟動報錯。

嘿嘿,到這里其實就開始覺得這個問題不簡單了,懷疑這么嚴重的問題肯定不是我一個人遇到過,經(jīng)過一番Google檢索,發(fā)現(xiàn)確實有人遇到過類似的問題,提出了如下幾種解決方法:

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

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

于是開始嘗試自己思考為什么啟動報錯?

首先需要弄明白執(zhí)行 yarn serve 到最終腳手架工程啟動都執(zhí)行了哪些操作?

當我們在工程目錄下的終端執(zhí)行 yarn serve 時,首先會去工程根目錄下的 package.json 中的 scripts 字段查詢是否有可執(zhí)行的腳本,ant-design-vue-pro 是這么寫的:

{
  "scripts": {
    "serve": "vue-cli-service serve"
  }
}

當運行 yarn serve 就相當于執(zhí)行的是 vue-cli-service serve,這個時候 nodejs 會嘗試在 node_modules 下的 .bin 目錄下查詢 vue-cli-service 可執(zhí)行性文件,如果找不到就會去全局安裝的 node_modules 下查詢可執(zhí)行文件,如果還是找不到的話就會報錯 command not found。

我在 ant-design-vue-pronode_modules/.bin 下確實沒有發(fā)現(xiàn) vue-cli-service 可執(zhí)行性文件。

現(xiàn)在就可以明確報錯的原因就是 vue-cli-service 命令不存在,也就是 @vue/cli-service 這個包沒有安裝成功(vue-cli-service命令是由@vue/cli-service這個包安裝后引入的)。

于是查看了工程下的 package.json 文件,發(fā)現(xiàn)在 package.jsondevDependencies 字段中指定了 @vue/cli-service

{
  "devDependencies": {
    "@vue/cli-service": "~5.0.8"
  }
}

現(xiàn)在的問題就簡化為:

在package.json中的devDependencies字段中指定的依賴包,在什么情況下會沒有安裝成功?

這個問題在 npm 文檔 中找到了解答:

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

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

現(xiàn)在問題又進一步縮小為:

npm,如何知道包是安裝在開發(fā)環(huán)境還是生產(chǎn)環(huán)境?

繼續(xù)查看 npm 文檔,在 npm install 相關文檔 中我們發(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.

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

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

這個時候,我突然回想起一個細節(jié),每次當我從 vscode 中打開終端(PS:我的終端默認使用的是zsh??)的時候,終端都會有一個如下的提示:

dotenv: found '.env' file. Source it? ([Y]es/[n]o/[a]lways/n[e]ver) 

通常遇到這個提示的時候我不會很在意,一般都會選擇 Yes,這樣如果我們的工程下存在 .env 文件,zsh 終端會自動讀取環(huán)境變量,并設置到當前環(huán)境中。

于是我趕緊查看了 ant-design-vue-pro 工程下的 .env 環(huán)境變量,果然看到了 NODE_ENV 的值被設置成了 production??‍♀?。

NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=/api

到這里其實就真相大白了 – 就是我使用的zsh終端惹的禍??。

終端啟動的時候自動解析了工程根目錄下的 .env 配置文件,配置文件里面恰巧又將 NODE_ENV 環(huán)境變量設置成了 production,導致 package.josndevDependencies 指定的依賴都沒有被安裝!

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

試了一下,果然一把成功,perfect !又看到了熟悉的vue啟動畫面,嘿嘿,晚上又可以給自己加個雞腿了??

yarn serve
yarn run v1.18.0
$ vue-cli-service serve
 INFO  Starting development server...

總結(jié)

到此這篇關于關于vue-cli-service:command not found報錯引發(fā)的文章就介紹到這了,更多相關vue-cli-service:command not found報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

最新評論