uni-app cli项目 和 vite项目 启动时占用相同端口

在处理 uni-app CLI 项目和 Vite 项目启动时占用相同端口的问题时，我们可以通过编程方式动态地为其中一个项目分配一个不同的端口，或者在启动时检查端口占用情况并作出相应调整。以下是两种可能的解决方案的代码示例：

方案一：动态分配端口

对于 uni-app CLI 项目

你可以在 manifest.json 中配置一个环境变量或者在 package.json 的启动脚本中传递一个端口参数。但这里我们假设你直接在代码中处理：

// 在项目入口文件（如 main.js 或 App.vue 的 script 部分）
const port = process.env.UNI_APP_PORT || 8080;

// 如果你需要在代码中与服务器通信，可以使用这个端口
// 例如，通过 axios 请求数据时配置 baseURL
axios.defaults.baseURL = `http://localhost:${port}/api`;

然后，在启动脚本中设置环境变量：

# package.json 中的 scripts 部分
"scripts": {
  "dev": "cross-env UNI_APP_PORT=9090 uni-app-cli serve"
}

对于 Vite 项目

你可以在 vite.config.js 中根据环境变量动态设置端口：

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

export default defineConfig(({ command, mode }) => {
  const port = process.env.VITE_PORT || 3000;
  return {
    plugins: [react()],
    server: {
      port
    }
  };
});

然后在启动脚本中设置环境变量：

# package.json 中的 scripts 部分
"scripts": {
  "dev": "cross-env VITE_PORT=9091 vite"
}

方案二：检查端口占用并自动调整

这里以 Node.js 脚本为例，展示如何检查端口占用情况，并自动选择一个未被占用的端口：

const net = require('net');
const portToCheck = 8080;

function findAvailablePort(startPort) {
  return new Promise((resolve, reject) => {
    const tester = net.createServer()
      .once('error', (err) => {
        if (err.code === 'EADDRINUSE') {
          findAvailablePort(startPort + 1).then(resolve).catch(reject);
        } else {
          reject(err);
        }
      })
      .once('listen', () => {
        tester.close(() => resolve(startPort));
      })
      .listen(startPort);
  });
}

findAvailablePort(portToCheck).then(port => {
  console.log(`Available port: ${port}`);
  // 在这里启动你的应用，并传递这个端口
});

这个脚本可以集成到你的启动流程中，以确保总是选择一个未被占用的端口来启动你的应用。对于 uni-app 和 Vite，你可以将这部分逻辑封装成一个工具函数，并在启动脚本中调用它。