子目录运行Vite时无法检测文件变更问题求助

一、修复Vite文件监听问题（无需全量构建） #

问题根源是Vite默认只监听当前工作目录下的文件，你的配置放在./vite子目录，上层Modules目录不在默认监听范围内，dev:hack是强制全量扫描所以速度慢。按以下步骤调整即可：

1. 修改vite.config.js配置
   把Vite的根目录设为项目根，同时指定仅监听Filter模块的文件，避免无关目录干扰：

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   
   export default defineConfig({
     root: '../', // 将根目录指向项目根，而非vite子目录
     plugins: [vue()],
     build: {
       outDir: './vite/dist', // 输出目录仍保留在vite子目录下
       rollupOptions: {
         input: {
           filter: './Modules/Filter/Resources/assets/js/app.js', // 明确Filter模块的入口
         },
       },
     },
     server: {
       watch: {
         ignored: ['!**/Modules/Filter/**'], // 仅监听Filter模块的文件
         usePolling: false, // 优先用原生监听，若仍有问题可改为true（适配特殊文件系统）
       },
       port: 5173,
       origin: 'http://localhost:5173', // 配合Laravel Blade的资源引用
     },
   });
   

2. 调整package.json脚本
   确保脚本直接调用Vite即可，无需额外hack：

   {
     "scripts": {
       "dev": "vite",
       "build": "vite build"
     }
   }
   

3. 运行方式
   在./vite目录下执行npm run dev，或者在项目根目录执行npm run dev --prefix vite。此时Vite会精准监听Filter模块的文件变更，仅修改相关文件时触发增量构建，速度会大幅提升。

4. Blade资源引用
   在Filter模块的Blade视图中，确保资源引用路径正确，比如：

   @vite('Modules/Filter/Resources/assets/js/app.js')
   

二、更优的Vue版本共存迁移方案 #

如果不想用子目录隔离，其实可以通过多入口+插件隔离实现Vue2和Vue3共存，逐步迁移模块：

1. 安装兼容依赖
   用Vue2.7（支持Composition API）配合Vue3，降低迁移成本：

   {
     "dependencies": {
       "vue": "^2.7.14", // Vue2带Composition API版本
       "@vue/runtime-dom": "^3.3.4"
     },
     "devDependencies": {
       "@vitejs/plugin-vue2": "^2.2.0",
       "@vitejs/plugin-vue": "^4.3.4",
       "vite": "^4.4.9"
     }
   }
   

2. 配置Vite多插件隔离
   让不同模块对应不同的Vue插件，实现版本共存：

   import { defineConfig } from 'vite';
   import vue2 from '@vitejs/plugin-vue2';
   import vue3 from '@vitejs/plugin-vue';
   
   export default defineConfig({
     plugins: [
       vue2({ include: /Modules\/Legacy\/.*\.vue$/ }), // 旧模块用Vue2插件
       vue3({ include: /Modules\/Filter\/.*\.vue$/ }), // Filter模块用Vue3插件
     ],
     build: {
       rollupOptions: {
         input: {
           legacy: './Modules/Legacy/Resources/assets/js/app.js',
           filter: './Modules/Filter/Resources/assets/js/app.js',
         },
       },
     },
     server: {
       watch: {
         include: ['Modules/**'],
       },
     },
   });
   

这种方式无需子目录拆分，能在同一个Vite环境下同时运行Vue2和Vue3模块，逐步把旧组件重构为Composition API风格后，再切换到Vue3，迁移过程更平滑。

内容的提问来源于stack exchange，提问作者Mike van Egmond