🧭 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 支持不完善
相关推荐
知识分享小能手几秒前
React学习教程,从入门到精通,React 单元测试:语法知识点及使用方法详解(30)
前端·javascript·vue.js·学习·react.js·单元测试·前端框架
Ares-Wang2 小时前
Vue3 》》vite》》TS》》封装 axios ,Promise<T>
vue.js·typescript
PineappleCoder3 小时前
搞定用户登录体验:双 Token 认证(Vue+Koa2)从 0 到 1 实现无感刷新
前端·vue.js·koa
EveryPossible4 小时前
展示内容框
前端·javascript·css
伊织code4 小时前
WebGoat - 刻意设计的不安全Web应用程序
前端·安全·webgoat
子兮曰4 小时前
Vue3 生命周期与组件通信深度解析
前端·javascript·vue.js
拉不动的猪4 小时前
回顾关于筛选时的隐式返回和显示返回
前端·javascript·面试
yinuo4 小时前
不写一行JS!纯CSS如何读取HTML属性实现Tooltip
前端
gnip5 小时前
脚本加载失败重试机制
前端·javascript
遗憾随她而去.5 小时前
Uni-App 页面跳转监控实战:快速定位路由问题
前端·网络·uni-app