Vue devServe配置open:true时 自动打开两个浏览器窗口

最新推荐文章于 2024-07-19 10:30:06 发布
最新推荐文章于 2024-07-19 10:30:06 发布
阅读量641 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a736755244/article/details/130350629
版权

场景

改造老版本的vue-admin-template项目，配置devServe中open:true时，运行项目，会打开两个浏览器窗口（新版的貌似没问题）。

排查

全网都能搜到解决方式，但是没有人说为什么，稍微看了一下源码，这里做个记录。

解决
  • vue.config.js 中配置devServer中open:false
  • package.json中配置 "dev": "vue-cli-service serve --open"
    在这里插入图片描述
原因

首先找到@vue/cli-service/lib/commands/serve.js，我们会发现有两个地方会触发打开浏览器操作。
那么为什么有的项目只会打开一个，有的会打开两个呢？原因在于对于open传值，不同版本的@vue/cli-service做了不同处理。
在这里插入图片描述
3.5.3版本
在这里插入图片描述

4.4.4版本
在这里插入图片描述

前端的小小对象
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue – vue.config.js中devServer配置方式
12-13
前言 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为”，即空字符串 只有一个接口ip端口时 devServer: { open: false, // 跨域 proxy: { '/nuojinadm/': { target: 'http://192.168.0.11/', changeOrigin: true } } } 2、设置axios中的baseUrl 与proxy端口一致 baseUrl: { dev: '/nuojinadm/', pro: '/nuojinadm/'
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
10-15
主要介绍了解决vue单页面多个组件嵌套监听浏览器窗口变化问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于 VueCli中 devserve
weixin_69506221的博客
11-03 1041
每日一个知识点 第一天
vue项目中webpack-dev-server的open和host0.0.0.0配置冲突
cafehaus的博客
02-16 1623
一个比较老的公司项目，webpack 用的 v3 版本，为了实现localhost、127.0.0.1和本机ip可以同时访问，webpack的devServer里的 host 我们一般会设置成 0.0.0.0，这样本机所有 ipv4 地址都可以实现访问。比如我们要将本地运行的前端项目，分享给公司的后端、产品、测试…预览效果，如果 host 直接设置的 localhost，运行后打开的地址 http://localhost:8080，直接分享给别人是没法打开的。
Vue基础
m0_65552590的博客
08-15 615
目标：项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.jssrc 并列处新建vue.config.js/*覆盖webpack的配置*/devServer: { // 自定义服务配置open: true, // 自动打开浏览器}}目的：转换格式，过滤器就是一个函数，传入值返回处理后的值过滤器只能用在，插值表达式和v-bind表达式Vue中的过滤器场景字母转大写，输入"hello",输出"HELLO"......
vue项目中devServe 设置open为true的时候浏览器启动两次的解决办法
芳草萋萋鹦鹉洲哦
02-18 3931
使用潘家成大佬的vue-admin-template框架，发现npm run dev后浏览器总是启动两次，出现两个相同的页面。 下面说一下解决办法： vue.config.js 里的devServer里的open选项改为false， package.json中的scripts改为 {“dev”: “vue-cli-service serve --open”} 然后就万事大吉辽 ...
window.open方法一次打开多个页面
热门推荐
sunnyboysix的博客
08-05 1万+
一 描述 window.open如果只是直接调用window.open('url'),如果使用多个页面，页面肯定只会显示一个。 二 业务场景 说一下我的业务场景：我发送一个文本给后台，后台返回三个URL给我，然后我要在页面打开三个窗口，然后数据更新我还要在第一次打开的三个窗口刷新数据，也就是我只能打开三个窗口。 三 上代码 稍微臭屁几句，我这里写了三个路由跳转然后iframe src...
论多窗口相互关联下window.open打开已在的窗口时只激活不刷新的实现方案
Oliver尹的博客
12-25 6097
本文主要实现的场景是，在任意一个窗口内首次打开指定页面时通过新建窗口的方式打开，在任意一个窗口内打开已打开的界面时，仅激活对应窗口，且对应窗口不刷新
默认浏览器设置及vue自动打开页面的方法
10-17
今天小编就为大家分享一篇默认浏览器设置及vue自动打开页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
简述vue路由打开一个新的窗口的方法
10-17
主要介绍了vue路由打开一个新的窗口的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
10-16
在Vue.js应用中，有时我们需要在用户关闭浏览器窗口时自动清空存储在localStorage中的数据，以确保用户下一次访问时获得一个干净的环境。本文将详细介绍如何在Vue中实现这一功能，无论是对于单页面应用程序（SPA）...
Vue中在新窗口打开页面及Vue-router的使用
08-27
Vue 中在新窗口打开页面是指在点击某个按钮或链接时，在新的浏览器窗口中打开一个页面，而不是在当前页面中打开。这种方式可以满足某些特殊的需求，如在点击某个按钮时，在新的浏览器窗口中打开一个统计页面。下面将...
【常用代码12】 window.open打开多个新窗口被禁用解决方法，window.open(url)下载多个文件只能下载一个解决方法
qq_51055690的博客
03-15 1332
id=’ + this.idList, ‘_blank’) // 在新窗口打开外链接。浏览器会提示是否允许，要点击允许才能下载多个文件。
windows环境下，vue启动项目后打开chrome浏览器
in_the_road的博客
02-19 3129
windows环境下，vue启动项目后打开chrome浏览器
webpack入门
weixin_46560115的博客
03-02 116
当前 Web 开发面临的困境 文件依赖关系错综复杂 静态资源请求效率低 模块化支持不友好 浏览器对高级 Javascript 特性兼容程度较低 etc… webpack webpack 是一个流行的前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。 webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把 工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。 目前绝大多数的前端项目，都是基于 webpack
npm run dev后会自动打开两个窗口
weixin_44685631的博客
09-10 1315
如题，除了会自动打开两个窗口其实也没啥其他，但总让人不爽，每次打开两个窗口，还要我手动去x掉个，其实简单两步就能解决这个问题，步骤如下： 步骤一 // vue.config.js文件 devServer: { port: port, // open: true, // 该位置注释掉 overlay: { warnings: false, errors: true } 步骤二 // package.json文件 "scripts": { //
Vue dev模式启动，出现页面启动两次问题解决方法
qq_43350849的博客
03-11 2716
第一步：找到vue.config.js文件，将devServer下的open，改成false devServer: { port: port, open: false, //原来为true，改为false overlay: { warnings: false, errors: true } 第二步：找到package.json文件，修改scripts下的dev。将对应的脚本启动项 修改为"dev": “vue-cli-service serve --open”。 ...
npm-dev-server --open
欣欣酱博客
01-18 404
打包css与images资源，和获取实时资源自动跳转 webpack.config.js文件 const path = require("path") const HtmlWebpackPlugin = require("html-webpack-plugin") module.exports={ mode:"none", entry:"./src/main.js", output:{ path:path.join(__dirname,"./dist/"),
使用Vue实现点击页面触发特效
最新发布
qq_45569925的博客
07-19 589
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
Vue项目主入口配置与浏览器自动打开问题解析
在 Vue.js 开发环境中，配置文件如 `config.dev.autoOpenBrowser` 是为了控制在运行 `npm run dev` 时是否自动打开浏览器预览应用。这个配置通常在 `http-proxy-middleware` 或类似工具中设置，用于处理服务器代理，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值