（Vue-Cli）配置开发时运行项目自动打开浏览器

最新推荐文章于 2025-08-28 15:38:56 发布
原创 最新推荐文章于 2025-08-28 15:38:56 发布 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文介绍了如何在使用Vue-Cli开发时配置项目启动自动打开默认浏览器。首先，需在电脑设置中指定默认浏览器。其次，在vue.config.js文件中添加相关配置，以确保在运行项目时能自动启动浏览器。

一、默认浏览器配置

  1. 打开电脑的控制面板，选择默认程序
    在这里插入图片描述2. 选择设置默认程序
    在这里插入图片描述
    3.找到web浏览器进行设置
    在这里插入图片描述

二、在Vue-cli中配置开发中运行项目时自动打开浏览器

在根目录下的vue.config.js文件中添加配置项
在这里插入图片描述

  • 根目录下的vue.config.js文件是Vue-cli的配置文件，可以到官方文档中查看更多配置。

在这里插入图片描述

最低0.47元/天 解锁文章
Vue-cli 自动打开浏览器
爱睡的虫虫
09-05 529
父---》子 使用绑定标签属性的方法给子组件进行绑定,在子组件内部通过props数组的方式来接受数据，接收之后就可以使用。 (1)父组件在给子组件绑定标签属性来传递数据的时候，key值可以有-，但是在子组件的props里我们要写成小驼峰的写法 (2)父组件可以将自己动态的数据传递给子组件，当父组件的数据发生改变，子组件收到的数据也发生改变 (3)父组件给子组件传递数据的...
vue配置启动项目自动打开浏览器
yutingwu816的博客
02-27 2650
vue配置启动项目自动打开浏览器 1.找到项目中的config文件夹内的index.js，里面有一个配置是autoOpenBrowser:false； 设置为true即可(或者全局搜索autoOpenBrowser设置为true) 2.打开package.json找到启动命令npm run dev 跟npm run serve(这两种命令都可以) 后面增加 --open 3.在根目录下新建vue.config.js文件 vue.config.js代码如下 module.exports = {
vue-cli项目运行自动打开浏览器
weixin_44645309的博客
04-02 276
方法一： 打开pakage.json "scripts": { "serve": "vue-cli-service serve --open",//加上--open "build": "vue-cli-service build" }, 方法二： 新建一个vue.config.js文件 module.exports = { devServer: { open: true } }
@vue/cli项目启动自动打开浏览器
哈
10-07 486
【代码】@vue/cli项目启动自动打开浏览器。
Vue 项目运行完成后自动打开浏览器【多种方法】
qq_22841387的博客
02-20 5749
本文介绍了几种在 Vue 项目中自动打开浏览器的方法，包括通过修改、配置文件、使用 Webpack 插件，以及通过环境变量动态配置。不同的方法适用于不同的场景，开发者可以根据自己的项目结构和需求选择合适的方案。通过合理使用这些配置，可以大大提高开发效率，减少重复的手动操作，让你更专注于业务逻辑的开发。提示：在生产环境中，建议关闭自动打开浏览器的功能，以避免不必要的浏览器窗口弹出影响服务器性能。
深入浅析vue-cli@3.0 使用及配置说明
10-17
除了上述提到的配置外，vue.config.js文件是另一个可选项，如果在项目的根目录下存在该文件，那么它会被@vue/cli-service自动加载。也可以在package.json中使用vue字段进行配置，但需要注意，使用这种方式时，需要...
安装vue-cli的简易过程
12-11
这将启动一个本地开发服务器，并在浏览器中打开你的项目，同时监听代码变化，自动刷新页面。 总的来说，Vue CLI为Vue.js开发者提供了一个高效、便捷的开发环境，使得创建和管理Vue项目变得更加简单。通过上述步骤，...
vue-cli如何快速构建vue项目
11-29
此时，项目会在默认浏览器中自动打开，展示运行中的页面。 Vue CLI生成的项目结构清晰，包括`build`、`config`、`src`、`static`等关键目录。`build`目录包含了项目构建相关的Webpack配置；`config`存储了项目环境...
vue-cli配置文件——config篇
08-28
其他设置包括开发服务器的主机名、端口、自动打开浏览器、错误覆盖层、错误通知以及是否启用文件监控等。 3. `prod.env.js`: 这个文件用于设置生产环境的变量。内容通常与 `dev.env.js` 类似，但 `NODE_ENV` 设置为...
vue项目运行时自动打开浏览器配置 - vue篇
阿莹yes的博客
04-08 1373
目录1.config/index.js文件内配置2.vue.config.js文件内配置3.package.json文件内配置 运行项目时，自动打开浏览器。可以有以下配置 1.config/index.js文件内配置 autoOpenBrowser: true, 2.vue.config.js文件内配置 devServer: { open: true } // 新增 open: true 这个有时会遇见浏览器打开两次 3.package.json文件内配置 "scripts": { "dev
vue-cli3 运行自动打开浏览器的方法设置
大剑师兰特的GIS世界
06-09 493
曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
vue-cli启动自动打开浏览器
akko
07-20 780
vue serve Usage: serve [options] [entry] 在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器 Options: -o, --open 打开浏览器 -c, --copy 将本地 URL 复制到剪切板 -h, --help 输出用法信息
vue配置项目启动时自动打开浏览器
Sylvasylva的博客
12-11 1068
vue配置启动时自动打开浏览器。如果配置了open为true，没有配置host，项目启动时浏览器只会自动打开0.0.0.0:80的页面，而不会打开本地项目启动的正确地址。
设置vue项目自动在浏览器中打开
wy3053的博客
09-08 610
设置vue项目自动在浏览器中打开
运行vue项目的时候自动打开浏览器
m0_52243496的博客
08-24 331
1.安装 npm i open-browser-webpack-plugin --save 2.打开build里面的配置文件 3.在配置文件里面加两行代码 ①const OpenBrowserPlugin = require(‘open-browser-webpack-plugin’) ② new OpenBrowserPlugin({ url: ‘http://localhost:8081’ }) //浏览器地址 4.打开配置文件config，找到index.js 5.将index.js里面
Vue项目启动自动在浏览器打开
Rovstephanie的博客
03-04 2473
默认情况下，Vue 项目使用的开发服务器通常会在终端中输出访问地址（如 localhost:8080），但并不会自动在浏览器中打开这个地址。
vue项目运行后自动在浏览器打开
最新发布
z_y_j229970438的博客
08-28 317
Vue CLI 项目可通过。
vue-cli 运行打开浏览器
ddny090930的博客
07-15 185
在配置好项目之后的package.json文件中，找到运行的script，其中“serve”中增加配置“ --open” "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lin...
vue项目在启动时，自动打开浏览器，并且打开地址是自己本地的IP地址
文龙刚的博客
02-03 2592
【代码】vue项目在启动时，自动打开浏览器，并且打开地址是自己本地的IP地址。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值