close
  • 简体中文

      • server.open

      • 类型：
      type Open =
  | boolean
  | string
  | string[]
  | {
      target?: string | string[];
      before?: () => Promise<void> | void;
    };
      • 默认值： false

      server.open 用于配置一组页面 URL，Rsbuild 会在启动 server 后自动在浏览器中打开这些页面。

      你也可以使用 Rsbuild CLI 的 --open 选项来打开页面。当同时使用 server.open 和 --open 时，--open 的优先级更高。

      示例

      server.open 可以设置为如下的值。

      • 打开项目的默认页面，默认为 http://localhost:<port>。如果配置了 server.host，则默认为 http://<host>:<port>。
      rsbuild.config.ts
      export default {
  server: {
    open: true,
  },
};
      • 打开指定的页面：
      rsbuild.config.ts
      export default {
  server: {
    open: 'http://localhost:3000',
  },
};
      • 打开指定的路径，等价于 http://localhost:<port>/home：
      rsbuild.config.ts
      export default {
  server: {
    open: '/home',
  },
};
      • 打开多个页面：
      rsbuild.config.ts
      export default {
  server: {
    open: ['/', '/about'],
  },
};
      • 打开一个非 localhost URL（配合 proxy 使用）：
      rsbuild.config.ts
      export default {
  server: {
    open: 'http://www.example.com',
  },
};

      端口号占位符

      Rsbuild server 监听的端口号可能会发生变更。比如，当端口被占用时，Rsbuild 会自动递增端口号，直至找到一个可用端口。

      为了避免端口变化导致 server.open 失效，你可以使用以下方法之一：

      • 开启 server.strictPort。
      • 使用 <port> 占位符来指代当前端口号，Rsbuild 会将占位符替换为实际监听的端口号。
      rsbuild.config.ts
      export default {
  server: {
    open: 'http://localhost:<port>/home',
  },
};

      指定浏览器

      Rsbuild 默认在系统默认浏览器中打开页面，同时也支持通过环境变量 BROWSER 来指定 dev server 启动时要使用的浏览器。

      浏览器名称

      Rsbuild 基于 open 库来打开浏览器，支持打开 Chrome、Edge 和 Firefox：

      # Chrome
BROWSER=chrome npx rsbuild

# Edge
BROWSER=edge npx rsbuild

# Firefox
BROWSER=firefox npx rsbuild

      在 Windows 上，使用 cross-env 来设置环境变量：

      npm i cross-env -D
cross-env BROWSER=chrome npx rsbuild

      你也可以参考 open 的 app 选项 来配置更多特殊的 BROWSER 值，例如一些操作系统特有的浏览器名称：

      # macOS
BROWSER="google chrome" npx rsbuild

# Linux
BROWSER="google-chrome" npx rsbuild

      浏览器参数

      通过 BROWSER_ARGS 来传递浏览器参数，多个参数之间用空格分隔：

      BROWSER=chrome BROWSER_ARGS="--incognito" npx rsbuild

      AppleScript

      在 macOS 上，Rsbuild 还额外支持通过 AppleScript 来打开浏览器，这允许你复用已有的浏览器标签页来打开页面。

      以下是 AppleScript 支持的浏览器名称：

      • Google Chrome Canary
      • Google Chrome Dev
      • Google Chrome Beta
      • Google Chrome
      • Microsoft Edge
      • Brave Browser
      • Vivaldi
      • Chromium
      • Helium

      比如：

      BROWSER="Google Chrome Canary" npx rsbuild

      环境变量配置

      你可以将 BROWSER 设置在本地的 .env.local 文件中，这样能够避免每次启动 dev server 时都需要手动设置环境变量，同时也能避免影响项目的其他开发者。

      # .env.local
BROWSER=chrome

      回调函数

      通过 open.before，可以在打开页面之前触发一个回调函数。

      rsbuild.config.ts
      export default {
  server: {
    open: {
      before: async () => {
        await doSomeThing();
      },
    },
  },
};

      当使用 open.before 时，你可以通过 open.target 来配置页面的 URLs。

      rsbuild.config.ts
      export default {
  server: {
    open: {
      target: ['/', '/about'],
      before: async () => {
        await doSomeThing();
      },
    },
  },
};