vue-cli3启动服务自动打开浏览器配置

最新推荐文章于 2025-11-08 17:47:04 发布
原创 最新推荐文章于 2025-11-08 17:47:04 发布 · 2w 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue-cli3

本文详细介绍如何在Vue CLI3项目中配置启动服务时自动打开浏览器的方法，包括修改package.json文件中的'scripts'配置项，以及如何选择在启动时打开浏览器或仅复制本地URL到剪切板。

vue-cli3启动服务自动打开浏览器配置

1.首先创建一个vue-cli3项目。

2.找到package.json文件

3.找到配置项‘scripts’

4.找到配置项‘serve’

5.修改下，加个字段 “serve”: “vue-cli-service serve --open”
在这里插入图片描述
如果不想每次默认打开浏览器还可以将上图中的 --open，替换成 --copy (将本地 URL 复制到剪切板)
附：vue-cli3官方文档配置

vue-cli3.x启动服务自动打开浏览器配置
qq_31913969的博客
08-23 1210
vue-cli3.x启动服务自动打开浏览器配置 第一种方法 浏览器自动打开 1.打开创建的vue-cli3 创建的项目 2.找到package.json文件 3.找到配置项 ‘scripts’ 4.找到配置项‘serve’ 5.修改，增加字段"serve": “vue-cli-service serve –open”, "scripts": { "serve": "vue-cli-serv...
（Vue-Cli）配置开发时运行项目自动打开浏览器
面包不是超人。
03-22 1387
一、默认浏览器配置 打开电脑的控制面板，选择默认程序 2. 选择设置默认程序 3.找到web浏览器进行设置 二、在Vue-cli中配置开发中运行项目时自动打开浏览器 在根目录下的vue.config.js文件中添加配置项 根目录下的vue.config.js文件是Vue-cli的配置文件，可以到官方文档中查看更多配置。 ...
vue3.0 中自动打开浏览器功能
m0_47265814的博客
05-18 1159
我之前创建的3.0 项目会自动打开浏览器，但是今天创建的项目并不会，很好奇是怎么做到的，最后发现vue3.0中的配置文件中配置一下 首先查看你的文件目录下有没有vue.config.js文件，如果没有就新建一个，vue3.0中的配置信息都会写在这里面，新建的项目是没有这个文件的 该文件中的写法 module.exports = { devServer: { open: true // 是否自动启动浏览器 } } 如果有其他配置需求也可以查询vue.config.js文件更多配置信息 .
vue-cli3 运行自动打开浏览器的方法设置
大剑师兰特的GIS世界
06-09 497
曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
超详细关于vue项目vue-cli-service启动报错失败的问题
最新发布
2509_94093638的博客
11-08 473
这里我们可以看出是报错了的，那么这个原因呢就是没有安装vue-cli-service导致的。我们需要在node_modules文件中找到这个文件的路径 然后替换到命令中。正常呢是配置的vue-cli-service serve这个命令。依赖全部安装完成后，运行一下看看结果，可以看到项目正常启动。这里为了方便比较 我选择新建一条命令对比。那么替换后的script命令为。
vue-cli基础知识及其常用配置详解，看完没收获来砍我
石小石Orz的博客
12-09 3407
Vue CLI 是 Vue 的项目的一个开发工具，简单来说，可以快速生成一套基于Vue完整的前端框架，因此也称之为脚手架。（vue3中也可以使用vite作为全新的脚手架）Vue CLI 是构建在Webpack之上的，因此开发服务器和构建功能和性能都将是Webpack的超集。你也可以使用 vue config 命令来审查或修改全局的 CLI 配置是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被自动加载。
实现Vue3项目运行后浏览器自动打开的操作
ganggun的博客
08-16 583
实现Vue3项目运行后浏览器自动打开的操作
启动vue之后取消自动打开浏览器的两种方式
qq_33247262的博客
09-24 3244
启动vue项目会自动打开浏览器，如果想关闭则采取以下两种方式 一、寻找vue.config.js 找到devServer，将open改成false,即可 devServer: { host: '0.0.0.0', port: port, open: false, proxy: { } }, disableHostCheck: true }, 二、寻找 config/index.js 修改autoOpenBrowser值为false即可 dev: {
安装vue-cli的简易过程
12-11
这将启动一个本地开发服务器，并在浏览器中打开你的项目，同时监听代码变化，自动刷新页面。 总的来说，Vue CLI为Vue.js开发者提供了一个高效、便捷的开发环境，使得创建和管理Vue项目变得更加简单。通过上述步骤，...
vue-cli2,vue-cli3（vue脚手架）超详细教程
m0_67392126的博客
03-09 487
文章目录 vue-cli脚手架 Node.js环境安装 vue-cli2的安装 npm，cnpm介绍 安装脚手架 用脚手架生成项目目录 vue-cli3的安装 使用vue-cli3图形界面 vue-cli脚手架 顾名思义，脚手架就是用来协助，配合，帮助构建一个项目的。使用vue-cli仅需5分钟就可以搭建一个完整的Vue.js应用,相较于人工操作，具有安全,高效的特点。 vue-cli与平台无关,功能更加齐全。无论是预编译模板，注入依赖，还是模拟生产环境等功能，vue-cli都具
Vue-cli3多页面配置详解
10-15
open: true, // npm run serve自动打开浏览器 index: '/index.html' // 默认启动页面 }, productionSourceMap: false }; ``` #### 步骤二：构建页面目录结构 在配置好vue.config.js之后，需要对项目的目录结构...
【Vue】问题：vue-cli-service serve --open自动打开浏览器跳转到http://0.0.0.0:8080
学无止境
09-08 701
【Vue】问题：vue-cli-service serve --open自动打开浏览器跳转到http://0.0.0.0:8080
vue运行命令报错：serve: `vue-cli-service serve --open`
weixin_38536027的博客
01-29 1万+
'vue-cli-service' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒ ▒▒▒▒▒▒▒▒▒ļ▒▒▒ npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! cm-supplychain-web-management@0.1.0 serve: `vue-cli-service serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the cm-supplychain-web-m.
vue-cli 运行vue项目，设置vue-cli-service serve --open自动打开浏览器，跳转到http://0.0.0.0:8081 解决办法
a1071626267的博客
09-06 2422
vue-cli 运行vue项目，设置vue-cli-service serve --open自动打开浏览器，跳转到http://0.0.0.0:8081 解决办法
【vue2】vue项目启动报错＞ vue-cli-service serve --open ‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
Xiang_Gong_Ya_的博客
08-27 835
开始以为是脚手架版本不对首先降低了版本到4.0配置了环境变量什么的但是还是不行。
vue-cli 运行vue项目，设置 “ vue-cli-service serve --open ” 自动打开浏览器，无法启动的解决办法
weixin_45279499的博客
12-17 3086
设置 “ vue-cli-service serve --open ” 后自动打开浏览器无法启动
vue-cli-service serve --open启动项目时打开浏览器失效无法打开浏览器解决方法
山前山后各有哀愁 有风无风都不自由
03-24 2960
vue-cli 运行vue项目，设置 vue-cli-service serve --open 自动打开浏览器失效，npm run serve无法启动浏览器
vue项目启动报错？报错信息hello-worldG0.1.0 serve c:\create-applYYTs＞vue-cli-service serve --open“vue-cli-servi
qq_70036866的博客
07-15 192
解决项目启动的时候报错问题
【vue学习笔记】vue-cli-service的使用
热门推荐
weixin_36089438的博客
09-05 1万+
学习资料 vue-cli项目中，会安装给一个名为vue-cli-service的命令。 vue-cli-servie serve vue-cli-service serve 会启动一个开发服务器（基于webpack-dev-server）并且附带了开箱即用的模块热重载（Hot-Module-Replacement）。 用法：vue-cli-service serve [options] [entry] 选项： --open 在服务器启动时打开浏览器 --copy ..
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值