大鹏网络网站建设报价,企业网站 asp源码,晋城城乡建设局网站,免费网站建设开发前言#xff1a;关于vue启动后打开chrome浏览器#xff0c;我查了很多资料#xff0c;方案如下#xff1a;
1、增加环境变量BROWSER为chrome#xff08;试了没效果#xff09;
2、设置系统的默认浏览器为chrome#xff08;应该可以#xff0c;但没试#xff1b;因为…前言关于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文件内容加上了
BROWSERchrome
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还是需要优化下
