当前位置: 首页 > news >正文

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

前言:关于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.lryc.cn/news/13212.html

相关文章:

  • SpringBoot2.X整合ClickHouse项目实战-从零搭建整合(三)
  • 学海记录项目测试报告
  • 【1792. 最大平均通过率】
  • 言简意赅+图解 函数传参问题(传值、传地址 500字解决战斗)
  • UML-时序图以及PlantUML绘制
  • 【Redis】Redis 有序集合 Zset 操作 ( 简介 | 查询操作 | 增加操作 | 删除操作 | 修改操作 )
  • Java特性之设计模式【策略模式】
  • IR-CUT 保证摄像机成像效果的滤镜
  • openpnp - 普通航空插头和PCB的连接要使用线对板连接器
  • Python3 错误和异常实例及演示
  • Android 9.0第三方app根据包名设置为横屏显示
  • MySQL会导致索引失效的情况与解决索引失效的方法
  • 使用nginx单独部署Vben应用
  • ES6新特性详解
  • Ubuntu下安装 ntfs-3g
  • 【专业认知】抖音就业 / 保研北大教育学 / 留学南加州EE / 微软就业
  • 【算法题】2 的 n 次幂的背后
  • 【人工智能AI】一、NoSQL 企业级基础入门《NoSQL 企业级基础入门与进阶实战》
  • Ubuntu安装opencv库3.4.10,并在cmake工程中引入opencv库
  • 实现8086虚拟机(四)——mov 和 jmp 指令解码
  • 数据库技术-函数依赖、键与约束、范式
  • shiro CVE-2020-1957
  • RabbitMQ 入门到应用 ( 五 ) 基本应用
  • 部署dapr的辛酸历程
  • golang入门笔记——内存管理
  • 97. 约数之和
  • 想和20岁的自己说
  • Unit Test and Integration Test
  • 2022年全国职业院校技能大赛(中职组)网络安全竞赛试题(3)
  • 智慧城市应急指挥中心数字化及城市驾驶舱建设方案