🧭 Vue CLI 项目运行时自动打开浏览器的实现方法【保姆级教程】

很多前端小伙伴在开发 Vue 项目时，希望像 Vite 一样，运行 npm run serve 后能自动打开浏览器，而 Vue CLI 默认并不会这么做。那么我们如何实现这一效果呢？

本文将从零讲解如何配置 Vue CLI 项目，让它在运行时自动打开浏览器，适合零基础读者，确保一步不落照着做就能成功！

---

✨ 方法一：使用

vue.config.js

开启浏览器自动打开

Vue CLI 项目底层使用的是 webpack-dev-server，它本身提供了 open 选项可以实现该功能。

✅ 操作步骤如下：

第一步：确认你的项目是 Vue CLI 项目

如果你还没创建项目，先执行：

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

然后执行：

npm run serve

确认可以正常启动。

---

第二步：在项目根目录创建

vue.config.js

如果你已经有这个文件，直接编辑即可。如果没有，执行以下命令创建：

touch vue.config.js

第三步：加入自动打开浏览器配置

// vue.config.js

module.exports = {
  devServer: {
    open: true, // 启动开发服务器时自动打开默认浏览器
  }
};

（可选）指定打开的页面或浏览器（进阶用法）

module.exports = {
  devServer: {
    open: {
      target: ['http://localhost:8080'], // 指定打开地址
      app: {
        name: 'Google Chrome' // 指定浏览器，如 'Google Chrome', 'firefox', 'Safari'
      }
    }
  }
};

💡 注意：浏览器名称请根据你的操作系统来填写，不同系统名称不同。比如：

• macOS: 'Google Chrome'、'Safari'

• Windows: 'chrome'、'firefox'

• Linux: 取决于你安装的浏览器

---

第四步：重启项目，测试效果

npm run serve

此时，浏览器应该会自动打开 http://localhost:8080。

---

🔧 方法二：使用

open-browser-webpack-plugin

插件（不推荐但可选）

如果你使用的是更复杂的自定义 webpack 配置，也可以使用专用插件来控制浏览器行为。

⚠️ 本方法不适用于 Vue CLI 默认配置，通常只有在 完全手动配置 Webpack的项目中才推荐使用。

安装插件

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

修改

vue.config.js

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

module.exports = {
  configureWebpack: {
    plugins: [
      new OpenBrowserPlugin({ url: 'http://localhost:8080' })
    ]
  }
};

⚠️ 注意：此插件对 Vue CLI 4+ 的支持不够理想，推荐优先使用上面方法一的 open: true 配置。

---

🧪 常见问题排查

问题	解决办法
启动项目没有自动打开浏览器	确保你正确配置了 vue.config.js 且在项目根目录
配置了 open: true 但没效果	尝试使用 open: { target: \[\], app: {} } 方式明确指定浏览器
不知道默认端口	默认是 8080，除非你在 .env 或 vue.config.js 中改过
报错 Cannot find module 'vue-cli-service'	项目不是 Vue CLI 创建的，请确认是否使用 vite

---

📦 最终完整示例（推荐配置）

// vue.config.js

module.exports = {
  devServer: {
    open: {
      target: ['http://localhost:8080'],
      app: {
        name: 'Google Chrome' // 根据你实际使用的浏览器填写
      }
    },
    port: 8080
  }
};

---

✅ 总结

配置方式	是否推荐	说明
vue.config.js 中设置 open: true	✅ 推荐	简洁高效，兼容性好
使用 open-browser-webpack-plugin 插件	❌ 不推荐	插件老旧，对 Vue CLI 支持不完善