windows环境下,vue启动项目后打开chrome浏览器

news2024/9/22 13:30:48

前言:关于vue启动后打开chrome浏览器,我查了很多资料,方案如下:

1、增加环境变量BROWSER为chrome(试了没效果)

2、设置系统的默认浏览器为chrome(应该可以,但没试;因为即使设置了,电脑上的360卫士也会被很恶心的重新设置为360浏览器)

先说方案吧,框架背景:vue3

解决方案:vue.config.js中的devServer下增加open配置

如下所示(无需在启动命令加--open)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: '127.0.0.1',
    port:'8080',
    open: {app:{name:'chrome'}},
  },
})

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

下面是排查的历程(感兴趣的可以看看)

(1)有人说,设置环境变量,然后从源码解释了原因,读了便源码感觉还挺对,我就项目根目录下加了环境变量.env.local文件,内容加上了

BROWSER=chrome

(2)实际测试没有效果,只能通过调试node_modules中的

@vue/cli-shared-utils/lib/openBrowser.js

debug时,没有进入到openBrowser方法;那依旧打开360也正常了

(3)向上层排查,查看

@vue/cli-service/lib/commands/serve.js

发现是通过webpack-dev-server启动的,并把open参数传递到webpack-dev-server了

(4)排查webpack-dev-server,查看

webpack-dev-server/lib/Server.js

发现确实有调用打开浏览器的方法

(5) 继续查看open模块,查看代码

open/index.js

发现底层就是调用的windows的powershell命令(跟cmd差不多),执行了start命令

中间还能拼接个app参数;于是乎,我打开cmd窗口,敲了个start chrome http://127.0.0.1:8080

然后chrome就打开了这个网页;说明我只要把app参数传入就行了

 (6)查找webpack-dev-server传入open参数的位置,发现可以把open配置为数组

 (7)修改vue.config.js配置

 (8)奇迹出现了,终于打开了chrome

(9)由于启动项目还没结束,就立刻打开了浏览器,感觉不太合理,正好源码中看到了wait参数,默认是false,于是我在open配置里加了wait:true,然后就报错了

(10)简直不可思议,webpack通过schema做了校验,继续排查

 

webpack配置

https://webpack.js.org/configuration/dev-server/#devserveropen

(11) 暂时没招了,就这样吧,路过的大神可以再支支招

另外有个想法,我们可以自己弄的插件,启动后执行;或者启动后调用下cmd命令,以后再琢磨吧,此处看webpack的配置schema还是需要优化下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/357429.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

有序表的应用:[Leetcode 327] 区间和的个数

一、题目 1、题目描述 给你一个整数数组 nums 以及两个整数 lower 和 upper 。求数组中,值位于范围 [lower, upper] (包含 lower 和 upper)之内的 区间和的个数 。 区间和 S(i, j)表示在 nums 中,位置从 i 到 j 的元素之和&…

基于jsplumb构建的流程设计器

项目背景 最近在准备开发工作流引擎相关模块,完成表结构设计后开始着手流程设计器的技术选型,调研了众多开源项目后决定基于jsplumb.js开源库进行自研开发,保证定制化的便捷性,相关效果图及项目地址如下 项目地址:ht…

进程切换-

实验课之前有一些问题 中断机制 第一个问题: interrupt的两个状态源头: 外中断多由随机中断(异步中断)造成,如鼠标点击,键盘输入; 内终端多由故障终端:程序运行异常,硬件…

使用PyQtGraph 自定义绘图

Python 的主要优势之一是探索性数据科学和可视化生态体系。一般的工具链为Pandas、numpy、sklearn 进行数据分析和使用matplotlib进行绘图。 但是如果需要自己自定义一个个性化的图形界面工具,则可能不是很合适。为了实现这种需求,可以使用PyQt构建GUI应…

【进阶篇】线程的硬件基础

文章目录高速缓存缓存一致性协议写缓冲区和无效化队列高速缓存 简介 高速缓存是主内存与处理器之间的硬件,其容量小于主存,但存取速率远高于主存。因此处理器在执行读写操作时,可直接和高速缓存交互,提高响应速度。 我们常见的变…

2049. 统计最高分的节点数目

2049. 统计最高分的节点数目题目算法设计:深度优先搜索题目 传送门:https://leetcode.cn/problems/count-nodes-with-the-highest-score/ 算法设计:深度优先搜索 这题的核心是计算分数。 一个节点的分数 左子树节点数 右子树节点数 除自…

【Opencv 系列】 第4章 直方图

文章目录[TOC](文章目录)前言1、直方图的定义、意义、特征2、直方图:2.1 灰度直方图2.2 彩色直方图前言 1、直方图的定义、意义、特征 在统计学中,直方图是一种对数据分布情况的图形表示,是一种二维统计图表,他的两个坐标分别是统…

docker安装配置镜像加速器-拉取创建Mysql容器示例

List item docker 常见命令大全docker安装docker拉取创建Mysql容器docker 安装 1、安装链接:https://blog.csdn.net/BThinker/article/details/123358697 ; 2、安装完成需要配置docker镜像加速器 3、docker 镜像加速器推荐使用阿里云的: 编…

硬件学习 软件Cadence day04 PCB 封装绘制

1.文章内容: 1. 贴片式电容 PCB 封装绘制 (型号 c0603 ) 2. 贴片式电阻 PCB 封装绘制 (型号 r0603 ) 3. 安规式电容 PCB 封装绘制 (这个就是 有一个电容,插入一个搞好的孔里面 …

社区宠物诊所管理系统

目录第一章概述 PAGEREF _Toc4474 \h 21.1引言 PAGEREF _Toc29664 \h 31.2开发背景 PAGEREF _Toc3873 \h 3第二章系统总体结构及开发 PAGEREF _Toc19895 \h 32.1系统的总体设计 PAGEREF _Toc6615 \h 32.2开发运行环境 PAGEREF _Toc13054 \h 3第三章数据库设计 PAGEREF _Toc2852…

Prometheus 告警机制介绍及命令解读

本文您将了解到Prometheus 告警模块Alertmanager的架构介绍、核心概念、命令解析和AMTool的基本使用。 Prometheus的告警模块并不存在于Prometheus中,而是 以独立项目Alertmanager存在。Prometheus服务器定义告警规则,这些规则将触发警报,将警报发送到Alertmanager。Alertma…

DaVinci 偏好设置:系统 - 解码选项

偏好设置 - 系统/解码选项Preferences - System/Decode Options解码选项Decode Options使用 GPU 进行 Blackmagic RAW 解码Use GPU for Blackmagic RAW decode允许使用 GPU 来加速 Blackmagic RAW(BRAW)媒体的解码。使用硬件加速解码 H.264/H.265Decode …

谁再用Double定义存储计算金额,我劈了他

不是三婶儿偏执,非要吐槽。家人们,咱就是说,按照基操逻辑谁会把严格金额计算相关的数据使用double类型呢… “我以为吕布已经够勇猛了,这是谁的部下?” 前几天,一同事让帮忙写段代码。内容比较常规&#xf…

Unity之ASE实现边缘光效果

一.前言 今天来实现一个简单的边缘光效果,可以应用与物体表面的一种荧光外溢的效果,特别是用在人的身体表面,会让人的皮肤更细腻,更好看。 物体上效果如下: 人体表面效果如下: 我们可以看到,这种人体表面…

Redis的整合和使用

引入依赖 <!--整合redis--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency>添加配置 spring.redis.host127.0.0.1 spring.redis.port6379 spring.…

算法训练营 day49 动态规划 爬楼梯 (进阶)零钱兑换 完全平方数

算法训练营 day49 动态规划 爬楼梯 &#xff08;进阶&#xff09;零钱兑换 完全平方数 爬楼梯 &#xff08;进阶&#xff09; 70. 爬楼梯 - 力扣&#xff08;LeetCode&#xff09; 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同…

PPO(proximal policy optimization)算法

博客写到一半发现有篇讲的很清楚&#xff0c;直接化缘了 https://www.jianshu.com/p/9f113adc0c50 Policy gradient 强化学习的目标&#xff1a;学习到一个策略πθ(a∣s)\pi\theta(a|s)πθ(a∣s)来最大化期望回报。 一种直接的方法就是在策略空间中直接搜索来得到最优策略&…

详解Ansible中角色的使用

目录 一、ansible roles 1、ansible 角色简介 2、roles目录结构 3、role存放的路径在配置文件ansible.cfg中定义 4、创建目录结构 二、roles的写法及应用 1、覆盖变量 2、控制任务执行顺序 三、ansible—galaxy命令工具 一、ansible roles 1、ansible 角色简介 * Ans…

VNCTF 2023复现

文章目录象棋王子电子木鱼BabyGo象棋王子 签到题&#xff0c;直接在源码中找就ok。 找到一处编码&#xff0c;在控制台输出。 flag为&#xff1a;flag{w3lc0m3_t0_VNCTF_2023~~~} 电子木鱼 需要先理清代码逻辑。 存在三个路由。 一&#xff1a;/路由用来查看当前的功德数量…

兼职任务平台收集(二)分享给有需要的朋友们

互联网时代&#xff0c;给人们带来了很大的便利。信息交流、生活缴费、足不出户购物、便捷出行、线上医疗、线上教育等等很多。可以说&#xff0c;网络的时代会一直存在着。很多人也在互联网上赚到了第一桶金&#xff0c;这跟他们的努力和付出是息息相关的。所谓一份耕耘&#…