自动找空闲端口再启动 mock-server」的脚本

一个完整的 自动分配 mock-server 和前端服务端口 的启动脚本 ✨，可以放在项目根目录，例如 start-dev.js。

---

✅ 目录结构约定

项目结构示例：

project-root/
├── .env.local
├── start-dev.js ← 👈 新增
├── package.json
├── mock-server/
│   └── index.mjs
├── src/
│   └── muiUI/
│       └── apps/
│           └── cardUI/
│               └── rsbuild.config.ts

---

✅ 第一步：安装依赖

pnpm add -D dotenv get-port concurrently

---

✅ 第二步：修改 .env.local 支持默认端口

# 可写默认值，但自动脚本可覆盖它
VITE_MOCK_PORT=3001
VITE_DEV_PORT=4200

---

✅ 第三步：start-dev.js 自动找端口并启动

// start-dev.js
import { exec } from 'child_process';
import * as dotenv from 'dotenv';
import getPort from 'get-port';
import path from 'path';
import fs from 'fs';

dotenv.config({ path: path.resolve(__dirname, '.env.local') });

const start = async () => {
  const defaultMockPort = parseInt(process.env.VITE_MOCK_PORT || '3001');
  const defaultDevPort = parseInt(process.env.VITE_DEV_PORT || '4200');

  const mockPort = await getPort({ port: defaultMockPort });
  const devPort = await getPort({ port: defaultDevPort });

  // 动态更新 .env.local 中的端口（可选）
  const envPath = path.resolve(__dirname, '.env.local');
  let envContent = fs.readFileSync(envPath, 'utf-8');

  envContent = envContent
    .replace(/VITE_MOCK_PORT=.*/, `VITE_MOCK_PORT=${mockPort}`)
    .replace(/VITE_DEV_PORT=.*/, `VITE_DEV_PORT=${devPort}`);

  fs.writeFileSync(envPath, envContent);
  console.log(`✅ 端口更新成功：mock=${mockPort}, dev=${devPort}`);

  // 启动 mock-server + 前端服务（cardUI）
  const command = `concurrently -n MOCK,DEV -c yellow,cyan "pnpm --filter mock-server dev" "pnpm --filter @muiUI/cardui dev"`;

  const child = exec(command, { cwd: __dirname });

  child.stdout?.pipe(process.stdout);
  child.stderr?.pipe(process.stderr);
};

start();

---

✅ 第四步：mock-server/index.mjs 中读取端口

// mock-server/index.mjs
import jsonServer from 'json-server';
import dotenv from 'dotenv';

dotenv.config({ path: '../../.env.local' }); // 根据实际位置调整

const port = process.env.VITE_MOCK_PORT || 3001;
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();

server.use(middlewares);
server.use(router);

server.listen(port, () => {
  console.log(`🚀 mock-server running on http://localhost:${port}`);
});

---

✅ 第五步：package.json 中添加启动命令

// 根目录的 package.json
{
  "scripts": {
    "dev": "node start-dev.js"
  }
}

---

🧪 启动项目

pnpm dev

它会：

• 自动找两个没被占用的端口（mock / 前端）
• 写入 .env.local
• 并用 concurrently 启动 mock-server 和 cardUI 前端

---