Vue CLI 3 启动服务怎么自动打开浏览器配置

在使用 Vue CLI 3 进行开发时，启动开发服务器后自动打开浏览器是一个非常方便的功能。这个功能可以节省开发者的时间，避免手动打开浏览器并输入 URL 的繁琐步骤。本文将详细介绍如何在 Vue CLI 3 中配置启动服务时自动打开浏览器。

1. Vue CLI 3 简介

Vue CLI 3 是 Vue.js 官方提供的脚手架工具，它可以帮助开发者快速搭建 Vue.js 项目。Vue CLI 3 提供了丰富的配置选项和插件系统，使得开发者可以根据自己的需求定制项目。

2. 启动开发服务器

在 Vue CLI 3 中，启动开发服务器的命令是 npm run serve 或 yarn serve。执行这个命令后，Vue CLI 3 会启动一个开发服务器，并在终端中显示访问地址，通常是 http://localhost:8080。

3. 自动打开浏览器的配置

默认情况下，Vue CLI 3 不会自动打开浏览器。要实现自动打开浏览器的功能，可以通过以下几种方式进行配置。

3.1 修改 package.json 文件

在 package.json 文件中，可以修改 scripts 部分的 serve 命令，添加 --open 参数。这个参数会告诉 Vue CLI 3 在启动开发服务器后自动打开浏览器。

{
  "scripts": {
    "serve": "vue-cli-service serve --open"
  }
}

3.2 使用 vue.config.js 文件

Vue CLI 3 提供了一个 vue.config.js 文件，用于配置项目的各种选项。在这个文件中，可以通过 devServer 选项来配置开发服务器的行为。

module.exports = {
  devServer: {
    open: true
  }
}

在这个配置中，open: true 表示启动开发服务器后自动打开浏览器。

3.3 使用环境变量

Vue CLI 3 支持通过环境变量来配置开发服务器的行为。可以在 .env 文件中设置 OPEN_BROWSER 环境变量。

OPEN_BROWSER=true

或者在启动开发服务器时直接设置环境变量：

OPEN_BROWSER=true npm run serve

3.4 使用命令行参数

除了修改 package.json 文件和使用 vue.config.js 文件外，还可以在命令行中直接传递 --open 参数来启动开发服务器并自动打开浏览器。

npm run serve -- --open

或者使用 yarn：

yarn serve --open

4. 配置浏览器

默认情况下，Vue CLI 3 会使用系统的默认浏览器打开开发服务器。如果需要指定特定的浏览器，可以通过 BROWSER 环境变量来配置。

4.1 设置默认浏览器

在 .env 文件中设置 BROWSER 环境变量：

BROWSER=chrome

或者在启动开发服务器时直接设置环境变量：

BROWSER=chrome npm run serve

4.2 使用 vue.config.js 文件

在 vue.config.js 文件中，可以通过 devServer 选项的 open 属性来指定浏览器。

module.exports = {
  devServer: {
    open: 'chrome'
  }
}

5. 总结

通过以上几种方式，可以轻松地在 Vue CLI 3 中配置启动开发服务器时自动打开浏览器。这个功能可以大大提高开发效率，尤其是在频繁启动和停止开发服务器的情况下。希望本文的介绍能够帮助到正在使用 Vue CLI 3 的开发者们。

6. 参考文档

• Vue CLI 官方文档
• Vue.js 官方文档