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

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

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


✨ 方法一:使用

vue.config.js

开启浏览器自动打开

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

✅ 操作步骤如下:

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

如果你还没创建项目,先执行:

perl 复制代码
npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

然后执行:

arduino 复制代码
npm run serve

确认可以正常启动。


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

vue.config.js

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

arduino 复制代码
touch vue.config.js

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

arduino 复制代码
// vue.config.js

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

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

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

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

  • macOS: 'Google Chrome'、'Safari'

  • Windows: 'chrome'、'firefox'

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


第四步:重启项目,测试效果

arduino 复制代码
npm run serve

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


🔧 方法二:使用

open-browser-webpack-plugin

插件(不推荐但可选)

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

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

安装插件

arduino 复制代码
npm install --save-dev open-browser-webpack-plugin

修改

vue.config.js

ini 复制代码
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

📦 最终完整示例(推荐配置)

css 复制代码
// 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 支持不完善
相关推荐
java水泥工1 分钟前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
半夏陌离5 分钟前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端
子兮曰7 分钟前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
牛十二17 分钟前
mac-intel操作系统go-stock项目(股票分析工具)安装与配置指南
开发语言·前端·javascript
whysqwhw25 分钟前
Kuikly 扩展原生 API 的完整流程
前端
whysqwhw26 分钟前
Hippy 跨平台框架扩展原生自定义组件
前端
OEC小胖胖29 分钟前
页面间的导航:`<Link>` 组件和 `useRouter`
前端·前端框架·web·next.js
faimi1 小时前
🚀程序员必收藏!最全Git命令手册:解决90%团队协作难题
前端·gitlab
coooliang2 小时前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos