跳到主要内容位置

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

峰华

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

npm 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
caution

我这里只测试了在 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 的值来指定要打开的浏览器。