Laravel - "Npm run hot" 不工作并给我这个错误

Laravel - "Npm run hot" not working and giving me this error

我试图使用命令“npm 运行 hot”,但它没有执行命令,而是给我这个错误:

[webpack-cli] Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'dev'. These properties are valid:
   object { bonjour?, client?, compress?, devMiddleware?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, public?, setupExitSignals?, static?, transportMode?, watchFiles? }
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ hot: `mix watch --hot`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ hot script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Sander\AppData\Roaming\npm-cache\_logs21-05-07T14_39_33_713Z-debug.log

我做错了什么?

日志文件显示了这条消息:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\Program Files\nodejs\node.exe',
1 verbose cli   'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'hot'
1 verbose cli ]
2 info using npm@6.14.11
3 info using node@v14.16.0
4 verbose run-script [ 'prehot', 'hot', 'posthot' ]
5 info lifecycle @~prehot: @
6 info lifecycle @~hot: @
7 verbose lifecycle @~hot: unsafe-perm in lifecycle true
8 verbose lifecycle @~hot: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\xampp\htdocs\todo-app-vue-laravel\node_modules\.bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\xampp\php;C:\ProgramData\ComposerSetup\bin;C:\Program Files\nodejs\;E:\Python\Scripts\;E:\Python\;C:\Users\Sander\AppData\Local\Microsoft\WindowsApps;;E:\Microsoft VS Code\bin;C:\Users\Sander\AppData\Roaming\Composer\vendor\bin;C:\Users\Sander\AppData\Roaming\npm
9 verbose lifecycle @~hot: CWD: C:\xampp\htdocs\todo-app-vue-laravel
10 silly lifecycle @~hot: Args: [ '/d /s /c', 'mix watch --hot' ]
11 silly lifecycle @~hot: Returned: code: 2  signal: null
12 info lifecycle @~hot: Failed to exec hot script
13 verbose stack Error: @ hot: `mix watch --hot`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid @
15 verbose cwd C:\xampp\htdocs\todo-app-vue-laravel
16 verbose Windows_NT 10.0.19042
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "hot"
18 verbose node v14.16.0
19 verbose npm  v6.14.11
20 error code ELIFECYCLE
21 error errno 2
22 error @ hot: `mix watch --hot`
22 error Exit status 2
23 error Failed at the @ hot script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

最后,这是我的 package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.18",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "audit": "0.0.6",
        "commander": "^7.2.0",
        "fix": "0.0.6",
        "npm": "^7.12.0",
        "vue": "^2.6.12"
    }
}

我尝试了网上的几种方法来解决这个问题,但似乎还没有任何效果。希望有人知道解决这个问题。所有其他命令似乎都很好并且可以执行,只有“热”命令抛出此错误。

这是一个已知问题,要解决此问题,您必须将以下代码添加到 webpack.mix.js:

mix.override(config => {
    // Apply a workaround caused by Laravel Mix using the `webpack-dev-server@v4.0.0-beta`:
    // https://github.com/webpack/webpack-dev-server/releases/tag/v4.0.0-beta.3.
    // Basically the `dev` property has been deprecated in favor of `devMiddleware`.
    if (config.devServer) {
        config.devServer.devMiddleware = config.devServer.dev;
        delete config.devServer.dev;
    }
});

感谢:github.com/JeffreyWay/laravel-mix/issues/2964