Vue.js项目npm run serve启动后网络主机不可用问题

配图显示开发服务器启动后，Network栏标注为"不可用"，仅Local地址正常显示

以下是针对性的解决步骤：

• 修改Vue项目配置，允许外部网络访问
  如果是Vue CLI 3及以上版本的项目，在项目根目录创建或编辑vue.config.js文件，添加如下配置：

  module.exports = {
    devServer: {
      host: '0.0.0.0',
      port: 8080,
      allowedHosts: 'all'
    }
  }
  

  host: '0.0.0.0'会让开发服务器监听所有可用的网络接口，而非仅绑定localhost；allowedHosts: 'all'用于允许所有外部主机访问（Vue CLI 4.3及以上版本需要此配置）

• 重启开发服务器
  终止当前运行的npm run serve进程，重新执行该命令。重启后终端输出的网络地址栏将显示你的本机局域网IP，不再标注"不可用"

• 检查防火墙设置
  确保本地防火墙允许8080端口的入站连接，也可以临时关闭防火墙测试是否能正常访问

• 确认局域网IP正确性
  在终端执行ipconfig（Windows）或ifconfig（Mac/Linux），获取正确的局域网IP（通常为192.168.x.x格式），使用该IP地址访问应用

内容的提问来源于stack exchange，提问作者Zain Malik