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

最新推荐文章于 2024-05-01 17:24:46 发布
最新推荐文章于 2024-05-01 17:24:46 发布
阅读量3.5k 收藏 1
点赞数
分类专栏： 配置 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46177521/article/details/107149678
版权

今天了解到webpack-dev-server是一个小型的Node.js Express服务器，拥有及时编译的功能。
但是在搭建中发现。
在这里插入图片描述
在这里插入图片描述
可见webpack-dev-server已经搭建成功了服务器， 但是我们将http://localhost:8088地址复制进Chrome却无法响应。进入cmd 输入netstat -na 发现本地端口中并没有8088接口。

解决办法：
在这里插入图片描述
在webpack.config.js配置文件中
在这里插入图片描述
将自启浏览器设置为true

龙虾汤泡饭_
关注
专栏目录
webpack-dev-server搭建本地服务器（解决webpack-cli、webpack-dev-server版本不兼容报错）08
钢铁直女
05-06 1189
webpack-dev-server搭建本地服务器webpack-dev-server搭建本地服务器，开发阶段使用1、安装webpack-dev-server（开发时依赖）2、在webpack.config.js文件中配置devServer3、运行启动解决webpack-cli、webpack-dev-server版本不兼容报错： webpack-dev-server搭建本地服务器，开发阶段使用 webpack提供的本地开发服务器，基于node.js搭建。内部使用express框架，可以实现浏览器实时更新页
使用webpack-dev-server搭建本地服务器
webchang的博客
01-16 612
webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
【webpack打包问题】http://localhost:8080/访问 出现Cannot GET
kually的博客
04-15 178
在webpack.config.js文件中修改static，修改为当前目录下。ps：记录一下自己在学习过程中遇到的问题，把他们进行问题分析和解决方法。并不存在public目录，所有访问不到内容。
webpack dev server 无法通过ip访问问题
mbo的专栏
07-17 4385
同事开发前端项目，通过webpack-dev-server起的服务，本地localhost:300正常访问，而同一个局域网内其他同事无法通过她机器ip访问。 解决方法： (If you're on a Mac and network like mine.) Run webpack-dev-server with --host 0.0.0.0 — this lets
webpack devServer 启动成功，但是打开页面http://localhost:8080/只加载了html没有加载js、图片、css
phi1111的博客
04-11 828
解决方法3：filename不改，在devServer中添加 static: "./dist",这样在访问http://localhost:8080/时可以打开dist下的目录，再点击app.html即可访问。但是打开http://localhost:8080/默认加载未编译的index.html而不是编译好的app.html。解决方法2：在地址栏中手动访问http://localhost:8080/app.html。filename改为。
关于webpack执行npm run dev无法访问8080的问题（成功解决）
qq_42174584的博客
10-07 3834
刚开始在命令行中输入npm run dev想把项目跑起来，显示已经编译成功 但当打开浏览器发现 尝试网上说的方法一： 可能电脑不支持解析localhost改为127.0.0:8080-->结果发现不行 尝试方法二： 将防火墙关闭，重新使用命令行运行----->还是不行 尝试三：方法设置为自动打开浏览器（成功解决） 在config文件夹下的index.js,把autoOpenBrowser:flase,改为true，让它运行时自动打开浏览器 重新在命令行输入后成功打..
npm 运行vue-cli webpack 项目，npm显示应用显示已经运行，但是网页没有自动打开问题
weixin_38527697的博客
08-20 462
npm上显示：Your application is running here: http://localhost:8080 ，但是网页没有自动打开 解决方案： 打开项目文件，寻找config=>index.js 打开 在index.js中有个autoOpenBrowser,其值默认是false,把它设置为true 重启项目测试一下 ...
【整理篇】极速上手！webpack-dev-server的相关配置
SuperZZQ_的博客
12-27 1801
Webpack-dev-server是一个小型的Express(Node.js) 服务器，可以通过配置webpack开发中间件来为项目服务，并且能够无需刷新，自动更新，使开发者在前端开发过程中拥有超快的反馈和超赞的体验（就是爽）。本篇主要讲解已有webpack4.x版本基础上，安装与配置相关文件，搭建起webpack-dev-server服务器，实现极速上手与简单理解。 由于本篇接【整理篇】上手...
初学webpack(4) 配置webpack-dev-server
weixin_42713144的博客
07-23 270
webpack 其他 webpack-dev-server 可用于搭建本地服务器，基于node.js搭建，内部使用express框架，实现浏览器自动刷新显示修改结果。（类似于vscode的live server） 缓存到内存中，发布时在存入硬盘 安装该模块 npm install webpack-dev-server --save-dev 配置webpack.config.js 在module.exports中添加 devServer:{ contentBase:'./dist',
webpack（10）webpack-dev-server搭建本地服务器
厦门在乎科技
07-13 297
前言 当我们使用webpack打包时，发现每次更新了一点代码，都需要重新打包，这样很麻烦，我们希望本地能搭建一个服务器，然后写入新的代码能够自动检测出来，这时候就需要用到webpack-dev-server webpack-deb-server webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的浏览器自动刷新显示我们修改后的结果 由于它是个单独的模块，使用之前，我们需要先安装，命令如下： npm install -D
webpack运行没有本地访问地址
x_neee的博客
09-14 163
host:'192.168.5.20',//本地地址。在webpack.dev.config.js。port:8080,//端口号。
webpack无法通过局域网访问localhost
CCCCCCGGGGGGGG的专栏
03-01 585
// package.json "scripts": { "start": "webpack-dev-server --open --mode development --host 0.0.0.0 or 192.168.8.8", "build": "webpack -p", }, 假设你本机内网ip 是192.168.8.8， 想通过手机浏览器访问 locahost:300...
记录vue.config.js中配置代理(devServer)不生效的坑（跨域问题处理）
热门推荐
流沙QuickSand
07-08 1万+
前后端分离后，会遇到跨域问题。导致后端响应的数据被浏览器“拦截”，前端无法接收。往往就会导致类似下面的问题产生： 大意就是请求地址不同源，导致了跨域问题。解决方法：使用vue-cli脚手架，在vue.config.js文件中配置代理服务器，从而解决跨域问题。...
webpack中devServer的简单配置
Coralpapy的博客
08-06 363
webpack-dev-server 有助于提高开发效率。由于修改后的文件在内存中进行编译，大大提高了效率，同时由于热更新的，使得调试更为方便 安装： npm install --save-dev webpack-dev-server devServer: { // 指定加载内容的路径 contentBase: resolve(__dirname, 'dist'), // 启用gzip压缩 compress: true,
解决webpack-dev-server无法通过 localhost 访问的问题
qq_41045128的博客
06-24 2976
解决webpack-dev-server无法通过 localhost 访问的问题
code-server容器webpack的ws无法连接解决方法
最新发布
unxeer的博客
05-01 581
code-server容器webpack的ws无法连接解决方法
webpack dev-server 配置
EmotionComputer
08-29 6935
webpack dev-server
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值