Vue 项目运行完成后自动打开浏览器的多种方法

在开发 Vue 项目时，每次启动项目都要手动打开浏览器访问本地服务器，这对于开发者来说是一个重复且繁琐的操作。为了提高开发效率，本文将介绍几种在 Vue 项目中自动打开浏览器的方法，并提供详细的配置步骤。

方法一：通过修改 package.json 配置（适用于 Vue 3）

步骤 1：找到 package.json 文件

在项目根目录下，找到并打开 package.json 文件。这个文件包含了项目的依赖关系和运行脚本。

步骤 2：修改 serve 脚本

找到 scripts 部分，找到 serve 命令（通常是用于启动开发服务器的命令）。在 serve 命令后面添加 --open 参数，如下所示：

"scripts": {
  "serve": "vue-cli-service serve --open",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

效果

这样配置后，每次运行 npm run serve 或 yarn serve 时，项目启动后将自动打开浏览器并加载本地服务器地址。

注意：此方法适用于 Vue 3 项目，Vue 2 项目可能需要不同的配置方式。

方法二：在 vue.config.js 中配置 devServer （适用于有 vue.config.js 文件的项目）

步骤 1：找到或创建 vue.config.js 文件

在项目根目录下找到 vue.config.js 文件。如果项目中没有这个文件，可以手动创建一个。

步骤 2：配置 devServer

在 vue.config.js 文件中找到 devServer 对象，并添加 open: true 配置项。完整配置如下：

module.exports = {
  devServer: {
    open: true, // 自动打开浏览器
    port: 8080, // 可选，指定端口号
    host: 'localhost' // 可选，指定服务器地址
  }
}

效果

每次运行项目时，浏览器将自动打开并加载开发服务器的地址。如果你想要项目运行在特定的端口或特定的主机地址，也可以在这里进行配置。

方法三：使用 open-browser-webpack-plugin 插件（适用于 Webpack 配置）

步骤 1：安装 open-browser-webpack-plugin 插件

首先，使用以下命令安装 open-browser-webpack-plugin 插件：

npm install open-browser-webpack-plugin --save-dev

或

yarn add open-browser-webpack-plugin --dev

步骤 2：修改 Webpack 配置文件

找到项目中的 webpack.dev.conf.js 文件（通常位于 build 文件夹中），并在顶部引入 open-browser-webpack-plugin 插件：

const OpenBrowserPlugin = require('open-browser-webpack-plugin');

步骤 3：配置插件

在 plugins 数组中添加 OpenBrowserPlugin 的实例，并指定要打开的 URL 地址：

module.exports = {
  // 其他配置项
  plugins: [
    // 其他插件
    new OpenBrowserPlugin({ url: 'http://localhost:8088/' })
  ]
}

效果

当你启动项目时，浏览器将自动打开指定的 URL 地址。需要注意的是，这种方法默认会打开端口号为 8088 的项目，如果项目运行在其他端口，需要手动修改 URL 地址。

注意：该方法存在局限性，仅适用于当前只运行一个项目，因为默认会打开指定端口的项目。

方法四：通过环境变量动态指定端口（高级用法）

在某些情况下，你可能希望动态地指定项目运行的端口，并根据不同的环境打开不同的地址。可以通过在项目中配置环境变量实现这一点。

步骤 1：配置环境变量

在项目的根目录下创建 .env 文件，并在其中添加如下配置：

VUE_APP_PORT=8081
VUE_APP_OPEN_URL=http://localhost:8081

步骤 2：在 vue.config.js 中读取环境变量

修改 vue.config.js 文件，使其能够根据环境变量动态设置端口和打开的 URL 地址：

module.exports = {
  devServer: {
    port: process.env.VUE_APP_PORT || 8080, // 动态设置端口
    open: true, // 自动打开浏览器
    openPage: process.env.VUE_APP_OPEN_URL // 动态设置打开的 URL
  }
}

效果

这样配置后，你可以根据不同的环境变量配置启动不同端口的项目，并在项目启动后自动打开浏览器加载相应的地址。

总结

本文介绍了几种在 Vue 项目中自动打开浏览器的方法，包括通过修改 package.json、配置 vue.config.js 文件、使用 Webpack 插件，以及通过环境变量动态配置。不同的方法适用于不同的场景，开发者可以根据自己的项目结构和需求选择合适的方案。

通过合理使用这些配置，可以大大提高开发效率，减少重复的手动操作，让你更专注于业务逻辑的开发。

提示：在生产环境中，建议关闭自动打开浏览器的功能，以避免不必要的浏览器窗口弹出影响服务器性能。