npm run watch 卡在加載中

Question

npm run watch將我帶到一個永遠不會加載的頁面。 這是一步一步：

• 我通過運行laravel new my-app開始一個新項目。 我正在使用 Laravel 5.8
• 我轉到 my-app 並通過運行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訪問它。 另外，我希望選項卡會在所有內容編譯完成后自動打開，但事實並非如此

• 所以我盡量用配置它自己browserSync上laravel混合選項。 這是我的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 似乎工作，我可以訪問它的用戶界面。 這是輸出：

 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')上使用像mix.browserSync('my-app.dev')這樣的代理選項，但它給出了DNS_PROBE_FINISHED_NXDOMAIN錯誤
• 我在 chrome 上試過了，但同樣的事情發生在我的 firefox 上，我從來沒有安裝任何插件，我基本上什至不使用

Answer 1

上周我遇到了同樣的問題，這是由於對 BrowserSync 工作方式的誤解。

BrowserSync 中的內部服務器僅托管靜態 HTML/JS/CSS 頁面（如BrowserSync 文檔中所述）

然而，它將充當由另一個 Web 服務器提供服務的現有 Web 應用程序的代理，然后在您更新任何內容時刷新瀏覽器，從而發揮其魔力。

因此，解決方案是將 Laravel 項目托管在 Web 服務器上，然后使用npm run watch啟動 BrowserSync。 我會推薦XAMPP因為它很容易使用

Answer 2

像這樣改變你的 webpack.mix

mix.browserSync('http://localhost:8000')

Answer 3

幾天前我遇到了這個問題，我嘗試運行Xammp Apache 服務器，它對我有用，所以試一試