配置 Vite 2.0 项目启动后自动打开浏览器

使用 Vite 2.0 创建的项目，默认不会自动打开浏览器。假设我们运行下面的命令启动 Vite 开发服务器：

npm

npm run dev

Yarn

yarn dev

pnpm

pnpm run dev

命令行中会提示访问 http://localhost:3000 这个链接，但是并不会帮我们自动打开浏览器。我们还得手动复制 URL 到浏览器打开，或者使用 ctrl/command + 鼠标左键 来打开链接。

那么要如何让 Vite 2.0 创建的项目，在启动之后自动打开浏览器呢？

配置自动打开浏览器

Vite 2.0 提供了方便的配置，可以在项目运行之后自动为我们打开浏览器，方便开发者开发。

要让 Vite 2.0 在项目启动后自动打开浏览器，我们需要在 vite.config.js 配置文件中添加一组新配置项：

export default defineConfig({
  server: {
    open: true,
  }
})

这里我们在 defineConfig 的参数对象中：

• 添加了一个 server 配置项，它的值是一个对象。
• 在 server 对象中，我们又添加了一个 open 配置项，给它的值设置为了 true。

这样在 Vite 2.0 的项目启动后，就能自动打开浏览器了，并自动访问 http://localhost:3000。

打开指定路径

设置 server.open 为 true 之后，浏览器默认打开的是 http://localhost:3000，但如果我们想要默认打开指定的路径，那么可以给 open 属性设置字符串形式的值，传递一串 URL 路径，浏览器就会访问指定的路径，例如：

export default defineConfig({
  server: {
    open: "/blog/some-blog.html",
  }
})

这个配置会让浏览器自动打开 http://localhost:3000/blog/some-blog.html。

在指定浏览器中打开链接

如果想在系统默认浏览器之外的浏览器中打开链接，可以设置 process.env.BROWSER 环境变量，把它设置为对应的浏览器名称。浏览器名称取值根据操作系统的不同而不同：

• Chrome 浏览器，在 macos 下为 google chrome，在 windows 下为 chrome，在 linux 下为 google-chrome。
• Edge 浏览器，在 macos 下为 microsoft edge，在 windows 下为 edge，在 linux 下为 microsoft-edge。
• FireFox 浏览器，均为 firefox。

警告

我这里只测试了在 MacOS 下的 Chrome 和 Edge 浏览器，其它操作系统的浏览器名称还需要自行测试一下。

例如我们可以在 package.json 的 script 配置中，把 dev 启动项的命令改成下方所示：

"dev": "BROWSER='microsoft edge' vite",

这时就可以自动打开微软的 Edge 浏览器了（MacOS 下）。

小结

好了，这个就是 Vite 2.0 项目自动打开浏览器的方法，主要是设置 server.open 配置项，它可以设置为 boolean 类型的值，也可以设置 string 类型的值。Boolean 类型的值用于控制是否自动打开浏览器，string 类型的值则是自动打开指定 URL。另外我们还可以通过设置 process.env.BROWSER 的值来指定要打开的浏览器。