如何在Vite中配置server.open，实现打开指定页面与多浏览器？

Vite自带的server.open配置确实只支持布尔值或单一字符串，无法同时指定目标页面和多个浏览器。但可以通过以下两种方式实现需求：

方法一：借助Vite配置钩子+open包实现 #

Vite底层依赖open包处理浏览器打开逻辑，我们可以直接在Vite配置中利用服务器启动钩子手动控制打开行为：

1. 先安装open包：

npm install open --save-dev

2. 修改vite.config.js：

import { defineConfig } from 'vite'
import open from 'open'

export default defineConfig({
  server: {
    port: 5173, // 自定义端口，可根据需求修改
    open: false // 关闭Vite自动打开，由我们手动控制
  },
  plugins: [
    {
      name: 'open-multiple-browsers',
      configureServer(server) {
        // 监听服务器启动完成事件
        server.httpServer.once('listening', async () => {
          // 替换为你需要打开的特定页面URL
          const targetUrl = `http://localhost:${server.config.server.port}/your-target-page`
          
          // 依次打开指定浏览器，根据系统调整浏览器名称
          await open(targetUrl, { app: { name: 'google chrome' } }) // Chrome
          await open(targetUrl, { app: { name: 'firefox' } }) // Firefox
          // await open(targetUrl, { app: { name: 'microsoft-edge' } }) // Edge
          // Linux系统Chrome可能需要用'google-chrome'，Windows用'chrome'
        })
      }
    }
  ]
})

方法二：自定义npm脚本实现 #

如果更倾向于通过脚本控制，可以用并行执行工具配合浏览器打开脚本：

1. 安装依赖包：

npm install concurrently wait-on open --save-dev

2. 修改package.json中的脚本：

{
  "scripts": {
    "dev": "concurrently \"vite\" \"npm run wait-for-server && npm run open-browsers\"",
    "wait-for-server": "wait-on http://localhost:5173",
    "open-browsers": "node ./scripts/open-browsers.js"
  }
}

3. 创建./scripts/open-browsers.js文件：

const open = require('open')

async function launchBrowsers() {
  const targetUrl = 'http://localhost:5173/your-target-page' // 替换为目标页面
  await open(targetUrl, { app: { name: 'google chrome' } })
  await open(targetUrl, { app: { name: 'firefox' } })
}

launchBrowsers()

注意事项 #

• 浏览器名称需匹配系统中的正确标识：macOS常用google chrome/firefox，Windows用chrome/firefox，Linux可能是google-chrome/firefox。
• 若无需打开特定页面，直接使用http://localhost:5173即可。

内容的提问来源于stack exchange，提问作者Jeffrey_0100101001100101011001