跳到主要内容位置

配置 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
警告

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

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买