526互联

vite自动关闭端口号插件

发布时间 2023-12-26 15:03:43作者: 朱自清的散文集

关闭端口号插件

❓：有时候我们需要强制将我们的端口号进行固定，
?：我们在 server 中配置如下

 server: {
    host: '127.0.0.1',
    port: 8000,
    strictPort: true,
    open: true,
    hmr: {
      overlay: false,
    },
    /* 当我开启之后 我的learn-redux项目中可以请求 fals则不可以 出现cors */
    cors: true,
    proxy: {
      '/api': {
        target: 'https://www.fangpi.net/s',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
    /* 当我设置为允许我的learn-redux项目中的id+端口之后 就可以访问 不添加就出现cors  */
    // headers: { "Access-Control-Allow-Origin": "http://127.0.0.1:8000" },
  },

有时候我们端口号被占用的情况

error when starting dev server:Error: Port 8000 is already in use at Server.onError

需要我们手动去执行一次 kill命令，比较麻烦，我们可以使用 vite 插件去优化这个步骤，我们新建一个 vite 插件 js 文件

import { exec } from "child_process";
import os from "os";
import { createServer } from "vite";

function closePortPlugin() {
  return {
    name: "vite-plugin-close-port",
    enforce: "pre", // 确保插件在其他插件之前执行
    configureServer(server) {
      server.httpServer.on("error", (e) => {
        if (e.code === "EADDRINUSE") {
          const port = e.port; // 获取被占用的端口号
          let killCmd = "";
          const a = os.platform();
          if (os.platform() === "darwin") {
            // mac系统
            // mac下通过lsof命令找到端口的进程并kill
            killCmd = `lsof -i :${port} | grep LISTEN | awk '{print $2}' | xargs kill -9`;
          } else if (os.platform() === "win32") {
            // windows系统
            // windows下通过netstat命令找到端口的进程并taskkill
            killCmd = `netstat -ano | findstr :${port} | findstr LISTENING | for /f "tokens=5" %a in ('more') do taskkill /F /PID %a`;
          }

          if (killCmd) {
            exec(killCmd, (err) => {
              if (err) {
                console.error(`Failed to close port ${port}`);
              } else {
                console.log(
                  `Port ${port} has been closed, restarting server...`
                );
                // 关闭端口成功后重新启动服务
                createServer(server.config).listen();
                exec("npm run dev");
              }
            });
          }
        }
      });
    },
  };
}

export default closePortPlugin;

在我们的vite.config.ts文件中，我们进行插件的引入

export default defineConfig({
plugins: [closePortPlugin() as any, react()],
})

当我们执行npm run dev 的时候，第一次会报端口号被占用，并且执行这个插件，我们再去执行一遍npm run dev 即可运行我们的项目