Laravel 8 + Vue环境下npm run watch编译成功但无法加载页面

1. 对npm run watch的功能定位理解错误
   npm run watch仅负责监听前端资源文件变动，自动编译产物到项目public目录，本身不会启动独立的Web服务。用户大概率是误将编译完成后的访问地址当成了webpack的默认端口，而非php artisan serve启动的http://127.0.0.1:8000。
2. webpack-dev-server版本兼容问题
   你当前使用的laravel-mix@6.x默认适配webpack-dev-server@3.x版本，依赖里的webpack-dev-server@4.x存在API不兼容问题，如果启动了热更新（hot模式）会导致热更新服务启动失败，触发连接拒绝报错。
3. 端口占用或配置错误
   热更新服务默认使用的8080端口被其他程序占用，或者webpack.mix.js中配置了错误的服务地址/端口，也会导致连接失败。

• 确认访问地址正确
  运行npm run watch后无需切换访问地址，直接刷新http://127.0.0.1:8000即可查看更新后的页面，不需要访问其他端口。
• 修复热更新版本兼容问题
  如果需要使用无刷新热更新功能，先降级webpack-dev-server到适配版本：

npm uninstall webpack-dev-server
npm install webpack-dev-server@3.11.3 --save-dev

之后执行npm run hot，再访问http://127.0.0.1:8000即可实现热更新。

• 检查webpack.mix.js配置
  确保配置文件没有错误的服务相关配置，最简可用配置参考：

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

mix.js('resources/js/app.js', 'public/js')
   .vue()
   .sass('resources/sass/app.scss', 'public/css');

如果需要自定义热更新端口，添加如下配置即可：

mix.options({
  hmrOptions: {
    host: '127.0.0.1',
    port: 8081 // 替换为空闲端口
  }
})

• 排查端口占用
  Windows系统执行netstat -ano | findstr "8080"，Mac/Linux系统执行lsof -i:8080检查端口占用，杀掉对应进程或者更换热更新端口即可。

内容的提问来源于stack exchange，提问作者Raskoljnikovic