解决webpack-dev-server 自动打开浏览器失败的问题

最新推荐文章于 2023-03-24 14:20:16 发布
最新推荐文章于 2023-03-24 14:20:16 发布
阅读量909 收藏
点赞数
分类专栏： webpack 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44471622/article/details/125291665
版权

在学习webpack-dev-server的过程中，遇到了浏览器无法打开的问题，报错信息如下：

 <w> [webpack-dev-server] Unable to open "http://localhost:8080/" page. If you are running in a headless environment, please do not use the
"open" option or related flags like "--open", "--open-target", and "--open-app".

根据提示内容，在package.json中配置了--open仍不能自动打开浏览器，各种百度之后，才恍然是自己之前设置过禁止node.exe运行powershell，如下图所示。
在这里插入图片描述

解决办法：

  1. 解除电脑管家的拦截程序
  2. 直接将该程序添加到信任区
小五Ivy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react项目实践之webpack-dev-serve
12-11
模块热替换(Hot Module Replacement) HMR是webpack最令人兴奋的特性之一，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。HMR是一个非常值得去深入研究的东西，它绝不是目前我们看到的大多数技术文章说的配置一个hot参数这么简单，有兴趣的小伙伴可以去看看它的实现原理，目前为止我也只看过一点点。 其实实现HMR的插件有很多，webpack-dev-server只是其中的一个，当然也是优秀的一个，它能很好的与webpack配合。另外，webpack
webpack-dev-server：提供一个webpack应用。 根据更改更新浏览器。 文档https：webpack.js.orgconfigurationdev-server
02-05
webpack-dev-server 将与提供实时重载的开发服务器一起使用。 这应该仅用于开发。 它在使用了 ，它提供对webpack资产的快速内存访问。 目录 入门 首先，安装模块： npm install webpack-dev-server --save-dev 注意：虽然可以全局安装和运行webpack-dev-server，但建议在本地安装。 webpack-dev-server将始终在全局安装中使用本地安装。 用法 有两种主要的推荐使用模块的方法： 使用CLI 最简单的使用方法是使用 。 在您的webpack.config.js所在的目录中，运行： node_modul
open-browser-plugin:一个webpack插件来解决webpack-dev-server无法通过节点api自动打开浏览器的问题
05-06
浏览器插件 一个webpack插件来解决webpack-dev-server无法通过节点api自动打开浏览器的问题 如何使用 npm i -- save - dev open - browser - plugin // webpack.config.js const OpenBrowserPlugin = reuire ( 'open-browser-plugin' ) const config = { plugins : [ new OpenBrowserPlugin ( { port : 8080 } ) ] } 选项 港口 默认8080 主持人 默认localhost 协议 默认hppt:
webpack-hmr-3-ways：设置Webpack热模块替换的三种方法：webpack-dev-server CLI，webpack-dev-server API以及使用webpack-hot-middleware进行表达
02-05
HMR 3种方式 有3种使用Webpack HMR的方法。 该存储库包含每种方法的最小示例。 从最简单到最复杂： 使用 使用 使用 这是有关如何选择您要使用的方法的简短讨论。 如果您想要最简单的设置，请使用 。 如果您正在使用grunt或类的任务运行程序，则需要使用 。 或类似地，如果您有自己的节点脚本来运行webpack ，则需要使用 。 如果您已经在网站上使用Express ，或者需要在开发中运行其他服务，则需要使用 。 关于守则 每个目录中的浏览器javascript代码相同。 有3个文件： js/index.js ：入口点。 require()是另外两个文件box-c
webpack -- webpack-dev-server 启动报错解决
weixin_44622984的博客
12-29 1253
今天在启动webpack-dev-server的时候报错 报错原因: 搜了一下github和百度,应该是webpack-cli的版本与webpack-dev-server版本的冲突 解决方式: 1.删除已有项目webpack依赖 npm uninstall -D webpack-cli 2.重新安装 npm install -D webpack-cli@3 再次运行: 成功开启服务器 注: 如果按照上述方法仍然报相同错误,可以尝试将webpack webpack-cli webp
webpack-dev-server 自动打开浏览器失败原因及解决方法
m0_69301850的博客
05-31 605
这里记录下我踩到的坑，package.json 配置--open仍不能自动打开浏览器 报错信息： <w> [webpack-dev-server] Unable to open "http://localhost:8080/" page. If you are running in a headless environment, please do not use the "open" option or related flags like "--open", "--open-targ.
webpack-dev-server --open报错/vue ui 打开浏览器报错
Ice_ssj的博客
10-10 669
先给出标题两种报错的截图 webpack脚本"webpack-dev-server"添加open报错 脚本代码： "scripts": { "dev": "webpack-dev-server --host 127.0.0.1 --port 8888 --open" } 报错截图： 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置
解决webpack5.0以上版本使用webpack-dev-server报错问题
Lloveyy的博客
08-05 1200
解决webpack5.0以上版本使用webpack-dev-server报错问题 webpage、webpack-dev-server、webpack-cli的版本如下： { "webpack": "^5.48.0", "webpack-dev-server": "^3.11.2", "webpack-cli": "^4.7.2" }, 配置webpack.config.js devServer: { port: 8080, contentBa
webpack-dev-server的基本配置 和一些错误
博客的博客
09-05 589
2019年9月5日 webpack-dev-server是一个非常强大的工具，能够自动检测到我们的代码更新并且自动打包 当完成webpack的配置之后 -------->webpack的基本配置 1.安装webpack-dev-server 在控制台输入 'npm i webpack-dev-server -y' ...
webpack-dev-server自动更新页面方法
11-26
这两天在看webpack，今天卡在webpack-dev-server上了，折腾了一下午，一直无法正常运行，每次服务器也提示正常启动了，但是浏览器一输入localhose:8080/admin就提示Get/…,反正就是无法打开页面。最后找到一个帖子，...
webpack-dev-server启动报错Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
qq_40285497的博客
11-13 330
这个错误可能最近你们都会看到，那很大原因就是你们看的是中文官网，你可以看看英文官网。 之前package.json配置如下 "script": { "start": "webpack-dev-server --open" } 然后执行就报错了，英文官网配置如下 "script": { "start": "webpack serve --open" } ...
彻底解决webapck-dev-server的报错问题
weixin_43405946的博客
12-23 2260
webpack中的webpack-dev-server报错的根源是webpack和webpack-cli版本问题，一开始我安装的时候没有设置版本，就一直报错，之后我重新开了一个文件，重新下载webpack 和 webpack-cli npm install webpack@5 webpack-cli@3 -D npm install webpack-dev-server -D npx webpack-dev-server 然后启动成功了 ...
【webpack5】webpack-dev-server 不能正常启动
小笼包不是包的博客
01-29 2748
【webpack5】webpack-dev-server 不能正常启动 一、问题 webpack-dev-server --open --config script/webpack.dev.js webpack4环境下可以正常启动，但是升级webpack5后依赖都要升级，再跑这个指令就会报错： internal/modules/cjs/loader.js:584 throw err; ^ Error: Cannot find module 'webpack-cli/bin/confi
Unable to open browser. If you are running in a headless environment, please do not use the open fla
weixin_45065573的博客
01-10 946
Unable to open browser. If you are running in a headless environment, please do not use the open flag 无法ctrl+鼠标左键打开浏览器 很简单 修改下你的电脑默认浏览器就行了
解决webpack-dev-server无法通过 localhost 访问的问题
qq_41045128的博客
06-24 2752
解决webpack-dev-server无法通过 localhost 访问的问题
vue-cli-service serve --open启动项目时打开浏览器失效无法打开浏览器解决方法
山前山后各有哀愁 有风无风都不自由
03-24 2175
vue-cli 运行vue项目，设置 vue-cli-service serve --open 自动打开浏览器失效，npm run serve无法启动浏览器
让webpack-dev-server启动服务时自动打开浏览器
pon的博客
03-26 5747
最近用vue-cli脚手架安装vue模板后，使用npm run dev发现服务运行后不能自动打开浏览器，查看了一下package.json文件，里面的部分内容如下： "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "np......
vue项目中webpack-dev-server的open和host0.0.0.0配置冲突
cafehaus的博客
02-16 1461
一个比较老的公司项目，webpack 用的 v3 版本，为了实现localhost、127.0.0.1和本机ip可以同时访问，webpack的devServer里的 host 我们一般会设置成 0.0.0.0，这样本机所有 ipv4 地址都可以实现访问。比如我们要将本地运行的前端项目，分享给公司的后端、产品、测试…预览效果，如果 host 直接设置的 localhost，运行后打开的地址 http://localhost:8080，直接分享给别人是没法打开的。
webpack-dev-server
最新发布
08-25
webpack-dev-server 是一个用于开发环境的轻量级服务器，它与 webpack 模块打包工具结合使用，提供了实时重新加载（live reloading）和热模块替换（hot module replacement）等功能，使得在开发过程中可以快速地预览和调试应用程序。 通过 webpack-dev-server，你可以在本地启动一个服务器，并且监听指定的端口。当你修改了源代码文件时，webpack-dev-server 会自动重新编译并刷新浏览器，使你能够即时看到修改后的效果。同时，它还支持热模块替换，即在不刷新整个页面的情况下，只替换发生改变的模块，从而提高开发效率。 要使用 webpack-dev-server，你需要先安装 webpack 和 webpack-dev-server： ``` npm install webpack webpack-dev-server --save-dev ``` 然后，在 webpack 配置文件中配置 devServer 选项： ```javascript module.exports = { // ...其他配置项 devServer: { contentBase: path.join(__dirname, 'dist'), // 设置服务器从哪个目录提供内容 compress: true, // 启用 gzip 压缩 port: 9000, // 指定服务器监听的端口号 }, }; ``` 最后，在 package.json 文件中添加一个脚本命令以启动 webpack-dev-server： ```json { "scripts": { "start": "webpack-dev-server --open" } } ``` 通过运行 `npm start` 命令，就可以启动 webpack-dev-server，并在浏览器中打开应用程序。每次修改源代码后，都会自动重新编译并刷新页面。这样，你就可以方便地进行开发调试了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值