laravel - npm run watch 卡在加载中

问题描述

npm run watch引导我到一个永远不会加载的页面。这是一步一步的：

我通过运行开始一个新项目laravel new my-app。我正在使用 Laravel 5.8
我去我的应用程序并通过运行安装依赖项cd my-app && npm install。这是package.json文件：

{
    "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.19",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17"
    }
}

完成后，我按预期工作php artisan serve
npm run dev还完美编译了 app.js 和 app.scss
当我运行时npm run watch，它会正确构建它，但我无法通过常规访问它localhost:3000。另外，我希望在所有内容编译完成后自动打开选项卡，但事实并非如此
所以我尝试使用browserSynclaravel mix 上的选项自己配置它。这是我webpack.mix.js之后的文件：

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix
    .sass('resources/sass/app.scss', 'public/css')
    .js('resources/js/app.js', 'public/js');

mix.browserSync('http://localhost:3000');

然后我又跑npm run watch了。BrowserSync 似乎工作，我可以访问它的 UI。这是输出：

 DONE  Compiled successfully in 5380ms                                  15:18:33

       Asset      Size   Chunks             Chunk Names
/css/app.css   173 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.38 MiB  /js/app  [emitted]  /js/app
[Browsersync] Proxying: http://localhost:3000
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.163:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...

但是，当我访问时http://localhost:3000，它会显示一个永远不会加载的空白页面。控制台显示没有错误
我尝试使用mix.browserSync('my-app.dev')browserSync 之类的代理选项，但它给出了DNS_PROBE_FINISHED_NXDOMAIN错误
我在 chrome 上试过了，但同样的事情发生在我的 firefox 上，我从来没有安装过任何插件，我什至基本上不使用

标签： laravelwebpacklaravel-mix

laravel - npm run watch 卡在加载中

问题描述

解决方案

推荐阅读