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

最新推荐文章于 2022-11-05 13:46:59 发布

小五Ivy

最新推荐文章于 2022-11-05 13:46:59 发布

阅读量1k

点赞数

分类专栏： webpack 文章标签： webpack 前端

本文链接：https://blog.youkuaiyun.com/weixin_44471622/article/details/125291665

版权

webpack 专栏收录该内容

2 篇文章

订阅专栏

在学习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，如下图所示。
在这里插入图片描述

解决办法：

解除电脑管家的拦截程序
直接将该程序添加到信任区

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小五Ivy

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue学习：webpack-dev-server和nginx问答

百锦再的博客

04-22

7万+

这在大多数情况下是可行的，但如果你的后端服务器对请求的 Origin 属性有严格的检查，或者你需要代理到不同的域，那么你就需要设置 changeOrigin 为 true。当 changeOrigin 设置为 true 时，如果原始请求中的 Origin 是 http://localhost:8080，那么在代理请求中，Origin 会被修改为 https://api.example.com。需要注意的是，pathRewrite 的配置应该根据你的实际后端API路径和你想要的前端请求路径来设置。

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-...

1 条评论您还未登录，请先登录后发表或查看评论

webpack-dev-server 自动打开浏览器失败原因及解决方法

m0_69301850的博客

05-31

753

这里记录下我踩到的坑，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

841

先给出标题两种报错的截图 webpack脚本"webpack-dev-server"添加open报错脚本代码： "scripts": { "dev": "webpack-dev-server --host 127.0.0.1 --port 8888 --open" } 报错截图：我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置

vue中运行项目自动打开浏览器失败

Stitch_xiao的博客

11-05

842

vue中运行项目自动打开浏览器失败

Hbuilder中webpack的devServer的open失效

qq_43641288的博客

08-25

750

出现该问题，又没有提示，说明你以前禁止node.exe运行power shell 解决方法就是点击右键，以管理员身份运行Windows PowerShell 输入 set-ExecutionPolicy RemoteSigned 命令并运行

解决使用webpack-dev-server打包后，浏览器显示Cannot GET /

qq_55817438的博客

06-11

2244

解决使用webpack-dev-server打包后，浏览器显示Cannot GET /

webpack-使用webpack-dev-server.rar

04-12

然后，在 `webpack.config.js` 配置文件中添加 `devServer` 配置项： ```javascript module.exports = { // 其他配置... devServer: { contentBase: './dist', // 指定静态资源目录 hot: true, // 开启热模块...

webpack-dev-server自动更新页面方法

08-27

首先输入`npm start`命令生成两个bundle.js文件，然后输入`npm run server`或者`webpack-dev-server --inline --content-base`命令启动服务器，最后打开浏览器输入localhose:8080/admin或者localhose:8080/customer...

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

综上所述，open-browser-plugin为解决webpack-dev-server无法自动打开浏览器的问题提供了一个简洁有效的方案，使得开发者能够更加专注于代码编写本身，而不用为开发环境配置问题分心。在实际使用中，开发者需要根据...

webpack-dev-server报错

一只大桃子

03-10

1816

webpack-dev-server报错版本 "webpack": "^5.69.1", "webpack-dev-server": "^4.7.4", package.json "scripts": { "start": "webpack serve --open" } webpack.config.js配置文件 devServer: { static: './dist', }, 运行 npm start 报错：降低webpack-dev-server版本

webpack学习笔记（五）—— webpack-dev-server如何自动打开浏览器

qq_37899792的博客

03-21

3086

在package.josn里面配置scripts中的dev命令 "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" --open: 自动打开浏览器 --port 3000: 指定打开时的端口号 --contentBase src: 打开项目的主页面 --hot: 热更新给bundle.j...

解决webpack-dev-server端口搭建成功，却无法在浏览器访问问题

weixin_42750758的博客

06-22

1250

采用webpack-dev-server插件自动打包构建项目时，当访问http://localhost:8080/时，出现错误

彻底解决webapck-dev-server的报错问题

weixin_43405946的博客

12-23

2493

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.0以上版本使用webpack-dev-server报错问题

Lloveyy的博客

08-05

1387

解决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

666

2019年9月5日 webpack-dev-server是一个非常强大的工具，能够自动检测到我们的代码更新并且自动打包当完成webpack的配置之后 -------->webpack的基本配置 1.安装webpack-dev-server 在控制台输入 'npm i webpack-dev-server -y' ...

让webpack-dev-server启动服务时自动打开浏览器

pon的博客

03-26

5936

最近用vue-cli脚手架安装vue模板后，使用npm run dev发现服务运行后不能自动打开浏览器，查看了一下package.json文件，里面的部分内容如下： "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "np......

Unable to open browser. If you are running in a headless environment, please do not use the open fla

weixin_45065573的博客

01-10

1100

Unable to open browser. If you are running in a headless environment, please do not use the open flag 无法ctrl+鼠标左键打开浏览器 很简单修改下你的电脑默认浏览器就行了