如何配置TanStack Start应用的自定义运行端口？

你可以通过两种方式调整应用的运行端口：

方式一：在app.config.ts的Vite配置中指定端口 #

TanStack Start顶层的server字段是用来配置部署预设的，开发服务器的端口需要放到vite配置块下的server.port中。修改你的配置文件如下：

import { defineConfig } from "@tanstack/react-start/config";
import tsConfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  tsr: {
    appDirectory: "src",
  },
  server: {
    preset: "vercel",
  },
  vite: {
    plugins: [
      tailwindcss(),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
    ],
    // 添加端口配置
    server: {
      port: 3001, // 替换为你需要的端口号
    },
    build: {
      rollupOptions: {
        external: ["./storage/**"], // Mark all subdirectories under storage as external
      },
    },
  },
});

方式二：通过命令行参数指定端口 #

启动开发服务器时直接追加--port参数：

tsr dev --port 3001

如果你的package.json里有启动脚本，也可以直接修改脚本内容：

{
  "scripts": {
    "dev": "tsr dev --port 3001"
  }
}

内容的提问来源于stack exchange，提问作者Code on the Rocks