Laravel9+Vue3项目vite build --watch不监听.vue文件的问题

云原生阿岚

2026-8-7

解决Laravel 9 + Vite + Vue3中.vue文件热更新失效的问题

1. 替换错误的监听脚本

你当前使用的vite build --watch是生产构建模式下的监听，不支持Vite的热模块替换（HMR）功能，这是导致.vue文件修改后无响应的核心原因。

应该使用Vite官方的开发服务器命令：

直接运行：npm run dev（Laravel 9默认的package.json已配置"dev": "vite"）
若需自定义脚本，在package.json中修改/添加：
```
"scripts": {
  "dev": "vite",
  "build": "vite build"
}
```

2. 清理冲突的插件配置

你的vite.config.js中同时启用了FullReload和laravel插件的refresh: true，两者功能重叠会干扰Vue的HMR。请移除FullReload插件：

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

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

3. 确认.vue文件被正确引入

确保Demo.vue已被入口文件（如resources/js/app.js）正确导入并使用，示例如下：

// resources/js/app.js
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

如果Demo.vue在Pages目录下，需确保resolve逻辑能正确加载；若为全局组件，要在app.js中完成注册。