server.open#

• 类型：

type Open =
  | boolean
  | string
  | string[]
  | {
      target?: string | string[];
      before?: () => Promise<void> | void;
    };

• 默认值： undefined

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

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

示例#

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

• 打开项目的默认页面，默认为 http://localhost:<port>。如果配置了 server.host，则默认为 http://<host>:<port>。

export default {
  server: {
    open: true,
  },
};

• 打开指定的页面：

export default {
  server: {
    open: 'http://localhost:3000',
  },
};

• 打开指定的路径，等价于 http://localhost:<port>/home：

export default {
  server: {
    open: '/home',
  },
};

• 打开多个页面：

export default {
  server: {
    open: ['/', '/about'],
  },
};

• 打开一个非 localhost URL（配合 proxy 使用）：

export default {
  server: {
    open: 'http://www.example.com',
  },
};

端口号占位符#

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

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

• 开启 server.strictPort。
• 使用 <port> 占位符来指代当前端口号，Rsbuild 会将占位符替换为实际监听的端口号。

export default {
  server: {
    open: 'http://localhost:<port>/home',
  },
};

打开指定浏览器#

Rsbuild 默认会在当前系统的默认浏览器中打开页面。

在 macOS 上，通过设置环境变量 BROWSER，你可以指定 dev server 在启动时打开的浏览器，支持如下的值：

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

比如：

BROWSER="Google Chrome Canary" npx rsbuild dev --open

回调函数#

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

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

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

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