【发布时间】：2019-07-23 18:24:03
【问题描述】：
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访问它。另外，我希望在所有内容编译完成后自动打开选项卡，但事实并非如此所以我尝试使用 laravel mix 上的
browserSync选项自己配置它。这是我之后的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时，它会显示一个永远不会加载的空白页面。控制台显示没有错误 - 我尝试在 browserSync 上使用像
mix.browserSync('my-app.dev')这样的代理选项，但它给出了DNS_PROBE_FINISHED_NXDOMAIN错误 - 我在 chrome 上试过了，但在我的 firefox 上也发生了同样的事情，我从来没有安装过任何插件，我什至基本不使用
【问题讨论】：
-
转到 Chrome 开发工具 -> 网络选项卡。它显示了什么？
-
当我转到“localhost:3000”时，只是一个 0KB 和时间待定的“localhost”文件。当我使用“my-app.dev”之类的东西时，它会返回一个 my-app.dev 文档，其状态（失败）、0KB 大小和 14 毫秒的时间
-
您解决了这个问题吗？我有完全一样的。
-
恐怕我刚刚要添加一个“我也是”！在我原来的开发机器上运行良好，然后将其添加到 GitHub，克隆到另外两台机器上，无法让它们中的任何一个工作。使用内部服务器（php artisan serve）效果很好，使用带有 browsersync 的 npm run watch 会提供一个永远不会加载的浏览器窗口。打算再深入研究一下，如果我修复它，保证会报告！
-
我答应回来，所以我在这里......似乎我对 browsersync 的工作原理有一个根本的误解，它只能自己提供静态页面（而不是 PHP）。为此，您需要运行另一个 Web 服务器（在我的情况下，Apache 作为 XAMPP 的一部分），browsersync 将代理它并根据需要自动重新加载页面。我一启动 Apache，browsersync 就开始工作了
标签： laravel webpack laravel-mix