Tauri+React+Vite单仓开发中Vite端口循环冲突问题求助

排查步骤与解决方案 #

1. 检查monorepo工作区与脚本配置 #

• 核对项目根目录和各子包的package.json，确认scripts中没有重复触发Vite启动的命令，比如Tauri的beforeDevCommand是否和其他脚本存在重复调用逻辑。
• 检查pnpm/yarn工作区配置文件（pnpm-workspace.yaml或package.json的workspaces字段），确保UI组件包的脚本没有被意外触发启动Vite。

2. 清理缓存与残留进程 #

• 清除包管理器缓存，删除项目冗余文件后重新安装依赖：

  # macOS/Linux
  rm -rf node_modules .pnpm-store dist .vite
  pnpm cache clean
  pnpm install
  
  # Windows
  rmdir /s /q node_modules .vite dist
  pnpm cache clean
  pnpm install
  

• 强制清理指定端口的可能残留进程：

  # macOS/Linux
  lsof -ti:1420,1421 | xargs kill -9
  
  # Windows
  netstat -ano | findstr :1420 | findstr LISTENING | for /f "tokens=5" %a in ('netstat -ano ^| findstr :1420 ^| findstr LISTENING') do taskkill /f /pid %a
  

3. 调整Vite配置避免端口误判 #

• 在vite.config.ts中明确指定端口并限制监听本地回环，避免多网卡导致的端口占用误判：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    server: {
      port: 1420,
      strictPort: true,
      host: 'localhost', // 仅监听本地回环接口
      hmr: {
        host: 'localhost',
      },
    },
  });
  

• 临时禁用ESLint插件测试，排查是否是插件触发了额外Vite实例：

  // vite.config.ts 临时注释ESLint插件
  export default defineConfig({
    plugins: [/* eslintPlugin(), */ react()],
    // 其他配置不变
  });
  

4. 校验Tauri启动逻辑 #

• 打开tauri.config.json，确认beforeDevCommand仅调用一次前端启动脚本：

  {
    "build": {
      "beforeDevCommand": "pnpm dev",
      "beforeBuildCommand": "pnpm build"
    }
  }
  

• 跳过Tauri直接启动Vite，缩小问题范围：

  cd packages/your-frontend-package
  pnpm vite --port 1420 --strictPort
  

5. 检查UI组件包配置 #

• 确认UI组件包的package.json中没有意外启动Vite的脚本，比如dev或prepare脚本：

  // UI组件包的package.json
  {
    "scripts": {
      "build": "tsup",
      "lint": "eslint ."
      // 避免存在"dev": "vite"这类非必要脚本
    }
  }
  

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