使用.test域名的Laravel项目中Vite无法同步修改问题

以下是针对该场景的具体排查和解决步骤：

1. 修正Vite服务器核心配置 #

当前vite.config.js的server段缺少关键的端口和源地址配置，导致Vite无法与Herd的.test域名建立正确的热更新连接。修改配置如下：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js', 'resources/css/app.css'],
            // 明确指定需要监听刷新的文件，覆盖默认规则
            refresh: [
                'resources/**/*.blade.php',
                'resources/**/*.js',
                'resources/**/*.css',
            ],
        }),
    ],
    server: {
        host: 'myproject.test',
        port: 5173, // 指定Vite开发服务器端口
        strictPort: true, // 端口被占用时直接报错，避免自动切换导致连接失败
        origin: 'http://myproject.test:5173', // 匹配Vite服务器完整地址
        watch: {
            usePolling: true,
            ignored: ['node_modules/**', '.git/**'], // 排除无需监听的目录
        },
    },
});

2. 更新环境变量配置 #

修改.env文件，让APP_URL包含Vite服务端口，确保Laravel生成正确的资源链接：

APP_URL=http://myproject.test:5173

3. 排查浏览器控制台错误 #

打开浏览器开发者工具（F12）的Console标签，查看两类关键错误：

• 若出现WebSocket connection to 'ws://myproject.test:5173/ws' failed，说明端口/域名配置不匹配，回到步骤1核对配置。
• 若出现CORS相关错误，在server配置中添加cors: true：

  server: {
      // ... 现有配置
      cors: true,
  }
  

4. 清理缓存并重启服务 #

• 删除Vite缓存目录：

  rm -rf node_modules/.vite
  

• 终止当前npm run dev进程，重新执行启动命令：

  npm run dev
  

• 在Herd应用中找到对应项目，点击重启PHP服务。

5. 验证资源加载路径 #

访问http://myproject.test:5173（注意带上端口），查看页面源码中的资源链接，确认是否指向Vite开发服务器（例如http://myproject.test:5173/resources/js/app.js），而非生产环境的编译文件。

6. 检查Tailwind CSS监听规则 #

若仅Tailwind样式不更新：

• 确认tailwind.config.js的content字段包含所有需要扫描的文件；
• 修改样式后查看Vite控制台是否有编译日志输出，若没有则尝试将watch.usePolling改为false（部分系统无需轮询）。

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