當(dāng)執(zhí)行了npm run dev命令來編譯前端資源時寸士，經(jīng)常會遇到一個報錯檐什，類似這樣：
> Code@1.0.0 dev /home/vagrant/Code
> cross-env NODE_ENV=development webpack --progress --hide-modules
sh: 1: cross-env: not found
npm ERR! Linux 4.4.0-51-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v7.8.0
npm ERR! npm v4.2.0
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! Code@1.0.0 dev: `cross-env NODE_ENV=development webpack --progress --hide-modules`
npm ERR! spawn ENOENT
或者說：
npm ERR! Failed at the @ dev script 'cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
可能你具體的錯誤提示還稍有差異，不過這里先不管它弱卡，重點在于問題是出在cross-env這個組件上乃正。
這個cross-env是個什么鬼？有什么用婶博？
Most Windows command prompts will choke when you set environment variables with NODE_ENV=production like that. (The exception is Bash on Windows, which uses native Bash.) Similarly, there's a difference in how windows and POSIX commands utilize environment variables. With POSIX, you use: $ENV_VAR and on windows you use %ENV_VAR%.
好吧瓮具，又是微軟Windows的鍋~也即是我們在windows系統(tǒng)上使用NODE_ENV=production這樣的方式來設(shè)置node環(huán)境時，因為windows的系統(tǒng)變量是%ENV_VAR%這種格式凡人，而“行業(yè)標(biāo)準(zhǔn)”是$ENV_VAR這樣的名党，當(dāng)然windows上的bash例外。
那么為了解決這個跨平臺環(huán)境變量的問題挠轴，就有了cross-env這個組件传睹。知道這些個有啥用呢？
用處是岸晦，cross-env只是用在windows系統(tǒng)上的欧啤，在Mac和Linux系統(tǒng)上沒用，不需要裝启上，裝了反而會壞事兒~
所以從這一點上邢隧，你的問題其實有兩種可能：
- 你的項目環(huán)境是Windows系統(tǒng)，你沒有裝
cross-env,或者說因為路徑等其他原因調(diào)用不到它冈在。 - 你的項目環(huán)境是Linux或Mac倒慧，這個時候你沒必要裝
cross-env，但是你卻裝了包券，或者說laravel默認帶了迫靖，而且裝就裝吧，路徑調(diào)用往往還有錯 - 這里特別的是兴使，如果你是用的Homestead開發(fā)環(huán)境系宜，因為你虛擬機里是Linux，所以如果你在Host主機上去操作发魄，那你就是Windows環(huán)境盹牧，如果你
vagrant ssh進了虛擬機操作，那么就是Linux環(huán)境励幼；
所以解決辦法也要基于你的項目開發(fā)環(huán)境：
一汰寓、 Linux（Homestead）或Mac環(huán)境下：
你要做的，只是將你的package.json文件中的cross-env刪掉即可：
"dev": "node NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "node NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
二苹粟、 Windows系統(tǒng)下（WAMP有滑、MAMP）
- 首先你需要裝一下
cross-env，執(zhí)行：
npm install --save-dev cross-env --no-bin-links
或者你也可以全局安裝一下cross-env嵌削，以防止以后在其他項目也出現(xiàn)類似錯誤：
npm install -g cross-env --no-bin-links
- 將
package.json文件中的cross-env調(diào)用換成具體路徑node_modules/cross-env/dist/bin/cross-env.js毛好，最終類似這樣：
"dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
- 保險起見望艺，再執(zhí)行一下
npm install --no-bin-links - 然后再去執(zhí)行
npm run dev來試試
為什么會出來這么多梗？甚至很多人因此詬病laravel 5.4不友好——直接下載全新安裝都跑不起來
因為一直到laravel 5.4.15肌访，laravel的package.json是這樣的：
{
"private": true,
"scripts": {
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.1",
"laravel-mix": "^0.8.1",
"lodash": "^4.17.4",
"vue": "^2.1.10"
}
}
可以看到它的devDependencies里沒有依賴cross-env,但是在上方聲明了cross-env的路徑：node_modules/cross-env/bin/cross-env.js找默，因為laravel-mix這個組件里用到了cross-env。但是沒多久吼驶，cross-env的作者對組件路徑做了更改惩激，將cross-env/bin換成了cross-env/dist,于是在這個laravel commit里，package.json文件里更改了cross-env的路徑蟹演，同時"devDependencies"里加上了"cross-env": "^3.2.3"风钻，然后沒幾天，作者們意識到既然依賴了cross-env酒请，就沒必要上面寫具體路徑了骡技，所以在這個laravel commit里，package.json文件變成這樣：
{
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "^0.8.1",
"lodash": "^4.17.4",
"vue": "^2.1.10"
}
}
這期間呢蚌父，laravel-mix的作者Jeffway看到laravel里依賴了cross-env哮兰，所以他就在laravel-mix里直接取消了對cross-env的依賴，因為沒必要重復(fù)安裝苟弛，這直接導(dǎo)致了一系列問題的發(fā)生喝滞。而且這期間，laravel里對cross-env的依賴一直停留在"cross-env": "^3.2.3",直到5.4.30膏秫，才突然變成"cross-env": "^5.0.1". 所以呢右遭，取決于你所使用的laravel和laravel-mix的版本，可能是你package.json里沒有cross-env而報錯缤削，也可能是路徑變了以后沒更新窘哈，也可能是laravel調(diào)用的版本一直太低，因為這期間你可能執(zhí)行了composer update或npm update這些命令而導(dǎo)致兩者的小版本都發(fā)生變化亭敢，所以說不清道不明的問題就發(fā)生了滚婉。
