VSCode中Laravel+Vue项目修改仅执行npm run dev才生效如何解决

所有排查操作按顺序执行即可：

1. 确认开发服务启动逻辑 #

• Laravel 新版本默认集成 Vite 作为构建工具，热更新能力依赖 npm run dev 启动的常驻开发服务，不需要修改代码后反复执行全量编译：
  • 保留一个终端窗口常驻运行 npm run dev，不要关闭该窗口
  • 另开独立终端窗口运行 php artisan serve 启动后端服务
  • 确认 npm run dev 启动后终端无报错，再访问项目测试

2. 核对环境变量配置 #

打开项目根目录下的 .env 文件，确认 APP_URL 参数和你实际访问项目的地址完全一致，域名、端口、HTTP/HTTPS 协议都不能有差异，例如本地用 http://127.0.0.1:8000 访问就配置为：

APP_URL=http://127.0.0.1:8000

配置不匹配会导致 Vite 无法和浏览器建立热更新通信连接，只能手动全量编译生效。

3. 校验 Vite 配置 #

打开根目录下的 vite.config.js，参考标准配置核对：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    laravel({
      input: 'resources/js/app.js',
      refresh: true, // 开启后非Vue文件修改也会自动触发页面刷新
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
  // 自定义域名/多设备调试时可补充HMR配置
  // server: {
  //   hmr: {
  //     host: '127.0.0.1',
  //   },
  // }
});

重点确认 refresh 配置已开启，没有错误配置 HMR 地址。

4. 检查模板文件的 Vite 引入指令 #

打开全局页面模板（通常为 resources/views/app.blade.php），确认头部正确使用了 Laravel 官方的 Vite 加载指令：

@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])

不要手动引入打包后的静态 JS/CSS 文件，开发环境必须通过 @vite 指令自动注入热更新相关代码。

5. 缓存清理重试 #

如果上述配置都正常仍不生效，按顺序执行操作：

• 关闭所有正在运行的 npm run dev 和 php artisan serve 进程
• 执行 php artisan view:clear 清理 Laravel 视图缓存
• 依赖损坏时可执行 rm -rf node_modules && npm install 重装依赖
• 先启动 npm run dev 等待服务完全启动后，再启动 php artisan serve，用浏览器无痕模式访问测试

补充排查 #

如果只有特定组件修改不生效，检查该组件是否被 keep-alive 缓存包裹，可临时给组件添加动态 key 属性或者关闭 keep-alive 验证。

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