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

最新推荐文章于 2025-06-11 16:12:16 发布

原创最新推荐文章于 2025-06-11 16:12:16 发布 · 2w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue-cli3

学习笔记专栏收录该内容

19 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

2.找到package.json文件

3.找到配置项‘scripts’

4.找到配置项‘serve’

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hello_yihao

关注关注

17
点赞
踩
11

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

qq_31913969的博客

08-23

1191

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

1339

一、默认浏览器配置打开电脑的控制面板，选择默认程序 2. 选择设置默认程序 3.找到web浏览器进行设置二、在Vue-cli中配置开发中运行项目时自动打开浏览器 在根目录下的vue.config.js文件中添加配置项根目录下的vue.config.js文件是Vue-cli的配置文件，可以到官方文档中查看更多配置。 ...

4 条评论您还未登录，请先登录后发表或查看评论

vue3.0 中自动打开浏览器功能

m0_47265814的博客

05-18

1145

我之前创建的3.0 项目会自动打开浏览器，但是今天创建的项目并不会，很好奇是怎么做到的，最后发现vue3.0中的配置文件中配置一下首先查看你的文件目录下有没有vue.config.js文件，如果没有就新建一个，vue3.0中的配置信息都会写在这里面，新建的项目是没有这个文件的该文件中的写法 module.exports = { devServer: { open: true // 是否自动启动浏览器 } } 如果有其他配置需求也可以查询vue.config.js文件更多配置信息 .

vue-cli3 运行自动打开浏览器的方法设置

大剑师兰特的GIS世界

06-09

436

曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

彻底解决＂‘vue-cli-service‘ 不是内部或外部命令＂的问题！

最新发布

🔥 以龙息淬炼代码，在时光灰烬中重铸技术星河！⚡代码织星河者，皆为逆时空同谋！

06-11

1890

Vue2老项目启动失败？如何修复“vue-cli-service' 不是内部或外部命令”的问题？10分钟让祖传代码重生！

实现Vue3项目运行后浏览器自动打开的操作

ganggun的博客

08-16

547

实现Vue3项目运行后浏览器自动打开的操作

启动vue之后取消自动打开浏览器的两种方式

qq_33247262的博客

09-24

3138

启动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】问题：vue-cli-service serve --open自动打开浏览器跳转到http://0.0.0.0:8080

学无止境

09-08

681

【Vue】问题：vue-cli-service serve --open自动打开浏览器跳转到http://0.0.0.0:8080

安装vue-cli的简易过程

12-11

这将启动一个本地开发服务器，并在浏览器中打开你的项目，同时监听代码变化，自动刷新页面。总的来说，Vue CLI为Vue.js开发者提供了一个高效、便捷的开发环境，使得创建和管理Vue项目变得更加简单。通过上述步骤，...

vue-cli2,vue-cli3（vue脚手架）超详细教程

m0_67392126的博客

03-09

459

文章目录 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运行命令报错：serve: `vue-cli-service serve --open`

热门推荐

weixin_38536027的博客

01-29

1万+

'vue-cli-service' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еĳ▒▒▒ ▒▒▒▒▒▒▒▒▒ļ▒▒▒ 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

2347

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

792

开始以为是脚手架版本不对首先降低了版本到4.0配置了环境变量什么的但是还是不行。

vue-cli 运行vue项目，设置 “ vue-cli-service serve --open ” 自动打开浏览器，无法启动的解决办法

weixin_45279499的博客

12-17

3038

设置 “ vue-cli-service serve --open ” 后自动打开浏览器无法启动

vue-cli-service serve --open启动项目时打开浏览器失效无法打开浏览器解决方法

山前山后各有哀愁有风无风都不自由

03-24

2855

vue-cli 运行vue项目，设置 vue-cli-service serve --open 自动打开浏览器失效，npm run serve无法启动浏览器

【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 ..

vue-cli 运行打开浏览器

ddny090930的博客

07-15

171

在配置好项目之后的package.json文件中，找到运行的script，其中“serve”中增加配置“ --open” "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lin...

Vue CLI 的服务介绍与使用（2024-05-20）

hap1994的博客

05-20

2921

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过@vue/cli实现的交互式的项目脚手架。通过@vue/cli实现的零配置原型开发。一个运行时依赖 ()，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好的工具。一套完全图形化的创建和管理 Vue.js 项目的用户界面。Vue CLI 致力于将 Vue 生态中的工具基础标准化。