Laravel项目代码修改后无需手动刷新页面实现方法咨询

嘿，太懂这种每次改完代码还要手动刷新甚至反复重启服务的麻烦了！下面几个实用方案能帮你实现Laravel项目代码修改后自动刷新页面，彻底告别重复操作：

1. 用Laravel Vite热重载（推荐，Laravel 9+默认） #

Laravel 9及以上版本默认使用Vite作为前端构建工具，它自带的热重载功能能完美监听前后端代码变更，自动刷新页面：

• 先确保前端依赖已安装：npm install
• 启动Vite开发服务器：npm run dev
• 正常启动Laravel后端服务（可以用php artisan serve，或者Valet、Homestead这类本地环境）

不管你修改后端的控制器、模型，还是前端的JS/CSS、Blade视图文件，Vite都会自动检测到变化并刷新页面，完全不用手动操作。

2. Laravel Mix + BrowserSync（适合Laravel 8及以下） #

如果你还在使用Laravel Mix，可以集成BrowserSync来实现自动刷新：

• 安装依赖：npm install browser-sync browser-sync-webpack-plugin --save-dev
• 修改项目根目录的webpack.mix.js，添加BrowserSync配置：

  mix.js('resources/js/app.js', 'public/js')
     .sass('resources/sass/app.scss', 'public/css')
     .browserSync({
         proxy: 'your-local-app.test', // 替换成你的项目本地访问地址，比如Valet生成的域名
         files: [
             'app/**/*.php',
             'resources/views/**/*.blade.php',
             'public/js/**/*.js',
             'public/css/**/*.css'
         ]
     });
  

• 启动Mix的监听模式：npm run watch

之后修改配置里指定的文件时，BrowserSync会自动帮你刷新浏览器。

3. LiveReload通用方案（不限构建工具） #

如果上面的方法不适用，这个通用方案也能搞定：

• 给浏览器安装LiveReload插件（Chrome、Firefox应用商店都能找到）
• 全局安装LiveReload监听工具：npm install -g livereload
• 在项目根目录运行命令，监听代码目录：livereload app resources public
• 打开浏览器的LiveReload插件并启用，之后修改代码就会自动刷新页面了。

额外提示：如果使用Valet、Homestead这类本地开发环境，配合上面的工具会更稳定，而且不用每次手动启动php artisan serve哦！

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