解决 webpack-dev-server 不能使用 IP 访问

Posted 北野

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决 webpack-dev-server 不能使用 IP 访问相关的知识,希望对你有一定的参考价值。

webpack 是众所周知很好用的打包工具,在开发 vue 项目时,vue-cli 就集成了 webpack。
我们启一个服务:npm run dev
然后在浏览器可是使用 http://localhost:8080 访问,但是当我们遇到移动端项目时,需要在手机端访问,所以要把 localhost 换成本地 IP 地址,例如:http://192.168.x.xx:8080,你会发现移动端无法使用 IP 访问。

解决方案

第一种方法:
找到 your-project/build/webpack.dev.conf.js

// const HOST = process.env.HOST
const HOST = \'192.168.x.xx:8080\'

然后保存,重新启动一下服务,会发现 PC 地址栏已经变成:
http://192.168.x.xx:8080 了,然后手机试一试,没问题。


第二种方法:
找到 your-project/package.json

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

在这句话里面添加参数 --host 0,0,0,0

"dev": "webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js"

然后在 PC 地址栏输入:http://192.168.x.xx:8080 or localhost or 0.0.0.0 都可以访问,手机使用 IP 访问也是没问题。


最后提醒大家,手机可以访问的前提是:手机和电脑需要连的同一个 wifi

 

转载:https://www.cnblogs.com/cowboybusy/p/10991887.html

以上是关于解决 webpack-dev-server 不能使用 IP 访问的主要内容,如果未能解决你的问题,请参考以下文章

如何使 webpack typescript 响应 webpack-dev-server 配置以自动构建和重新加载页面

无法使 react-hot-loader 和 webpack-dev-server 与 react-router 一起工作

解决webpack运行npx webpack-dev-server时报错

webpack运行报错 webpack-dev-server.... 解决方法

webpack 4.x 解决 webpack-dev-server工具在webpack构建的项目中使用问题

Webpack-dev-server 不通过代理向外部域发送请求