webpack-dev-server 无法访问该网页的解决方法-JavaScript中文网-JavaScript教程资源分享门户

前言

在开发前端项目时，我们经常使用 webpack 来进行模块化的管理和打包。而 webpack-dev-server 则是一个非常便捷的工具，可以帮助我们快速启动本地服务器，并实时预览和调试项目。然而，有时候我们会遇到无法访问该网页的问题，这时候就需要进行一些解决方法的调试。

解决方法

1. 检查端口号是否已被占用

webpack-dev-server 启动时会默认监听 8080 端口，在本地启动多个项目时，可能会发生端口号被占用的情况。此时我们可以修改 webpack-dev-server 的启动端口号，例如：

// webpack.config.js
module.exports = {
  devServer: {
    port: 8888 // 修改端口号为 8888
  }
}

2. 检查本地 IP 是否正确

当我们使用 webpack-dev-server 启动本地服务器时，它默认会使用 localhost，即 127.0.0.1。但是有些情况下，我们需要在其他设备上访问本地服务器，这时候我们需要使用本地 IP 地址。此时需要注意的是，在某些情况下我们的 IP 地址可能会更改，因此需要动态获取本地 IP 地址。我们可以使用 Node.js 的 os 模块来获取本地 IP：

// webpack.config.js
const os = require('os');

function getLocalIP() {
  const network = os.networkInterfaces();
  const interfaces = Object.values(network);
  const ipv4Interfaces = interfaces.reduce((result, netInterface) => {
    return result.concat(netInterface.filter(detail => {
      return detail.family === 'IPv4' && detail.internal === false;
    }))
  }, []);
  return ipv4Interfaces.length > 0 ? ipv4Interfaces[0].address : 'localhost';
}
 
module.exports = {
  devServer: {
    host: getLocalIP(), // 获取本地 IP 地址
  }
}

3. 检查防火墙是否已关闭

有些情况下，我们启动本地服务后，也无法在其他设备上访问，这时可能是因为防火墙阻止了对应的端口。此时我们可以暂时关闭防火墙，或者修改规则，允许对应的端口访问。

总结

在开发过程中，遇到无法访问该网页的问题时，我们可以按照上述的解决方法进行排查。在实际项目中，还有很多类似的问题需要我们自己去解决，这也是我们学习前端技术的过程中必经的阶段。

参考资料：

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b60910add4f0e0ffebe8bb