系统:window 7;服务器:webpackServer;配置了端口3040。
当输入localhost:3040时可以正常访问,但是用局域网ip代替localhost就不行了。尝试让别人ping自己的ip也是可以的,是防火墙的问题吗?我对防火墙一窍不通,求指点?ip用的是下图的IPv4的地址:
系统:window 7;服务器:webpackServer;配置了端口3040。
当输入localhost:3040时可以正常访问,但是用局域网ip代替localhost就不行了。尝试让别人ping自己的ip也是可以的,是防火墙的问题吗?我对防火墙一窍不通,求指点?ip用的是下图的IPv4的地址:
解决 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 访问也是没问题。