測試項目Laravel Shop,Git源代碼到本地調(diào)整,環(huán)境配置完成之后,運(yùn)行Laravel,報錯信息如下:
The Mix manifest does not exist.
查看package.json文件,發(fā)現(xiàn)cross-env缺少了一些環(huán)境的支持
至Node.js官方下載Windows LTS版本,并進(jìn)行安裝
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"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",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.2.0",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10",
"webpack-laravel-mix-manifest": "^2.0.1"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.6.3",
"china-area-data": "^4.0.0",
"sweetalert": "^2.1.2"
}
}
檢查安裝的版本信息:
$ node -v
v10.16.2
$ npm -v
6.9.0
然后就只需要安裝 Laravel Mix。在新的 Laravel 項目中,你可以在目錄結(jié)構(gòu)的根目錄中找到一個 package.json文件,它包括了運(yùn)行基本的 Mix 所需的內(nèi)容。就如同 composer.json 文件,只不過它定義的是 Node 的依賴而不是 PHP。你可以使用以下的命令安裝它引用的依賴項:
npm install
如果你正在 Windows 系統(tǒng)上進(jìn)行開發(fā),或者在 Windows 主機(jī)系統(tǒng)上運(yùn)行虛擬機(jī),那你要在運(yùn)行 npm install命令時使用 --no-bin-links:
$ npm install --no-bin-links
npm WARN ajv-keywords@3.4.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN img-loader@3.0.1 requires a peer of imagemin@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-laravel-mix-manifest@2.0.1 requires a peer of webpack@>=4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
audited 12750 packages in 23.651s
found 8 vulnerabilities (4 moderate, 4 high)
run `npm audit fix` to fix them, or `npm audit` for details
運(yùn)行 Mix
Mix 是位于 Webpack 頂部的配置層,所以要運(yùn)行 Mix 任務(wù),只需要執(zhí)行默認(rèn)的Laravel package.json 文件中包含的一個 NPM 腳本:
$ npm run dev
> @ dev D:\phpStudy\laravel-shop
> npm run development
> @ development D:\phpStudy\laravel-shop
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
11% building modules 9/14 modules 5 active ...es\js\components\ExampleComponent.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting DONE Compiled successfully in 7495ms9:55:10 PM
監(jiān)控資源文件修改
npm run watch 會在你的終端里持續(xù)運(yùn)行,監(jiān)控所有相關(guān)的資源文件以便進(jìn)行更改。
Webpack 會在檢測到文件更改時自動重新編譯資源:
$ npm run watch
在某些環(huán)境中,當(dāng)文件更改時,Webpack 不會更新。如果系統(tǒng)出現(xiàn)這種情況,請考慮使用watch-poll 命令在后臺運(yùn)行:
$ npm run watch-poll &