webpackdevserver 报错Something is already running on port 3000 不一定是因为端口被占用

webpackdevserver 报错Something is already running on port 3000 不一定是因为端口被占用
也有可能是你没有开localhost 绑定域名 导致域名解析失败

跟踪代码发现:

如果本地服务报错 会进入

listen(port, 'localhost', err => {
  if (err) {
    console.log('进入2',err)
    return handleError(err)
  }

  // 4. check current ip
  listen(port, address.ip(), (err, realPort) => {
    if (err) {
      console.log('进入1')
      return handleError(err)
    }

    callback(null, realPort)
  })
})
function handleError() {
  port++
  if (port >= maxPort) {
    debug(
      'port: %s >= maxPort: %s, give up and use random port',
      port,
      maxPort
    )
    port = 0
    maxPort = 0
  }
  tryListen(host, port, maxPort, callback)
}

而没进入一次这个函数 port都会累加一次  进入这个err的原因就是没有绑定host 

err信息打印出来是这样的:

Error: getaddrinfo ENOTFOUND localhost     at errnoException (dns.js:28:10)     at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:73:26)   code: 'ENOTFOUND',   errno: 'ENOTFOUND',   syscall: 'getaddrinfo',   hostname: 'localhost' 

翻译后大概意思就是没有绑定host 无法进行dns解析

 

导致在调用对比时候出现问题

devserver调用函数

function choosePort(host, defaultPort) {
  return detect(defaultPort, host).then(
    port =>
      new Promise(resolve => {
   // 这里做判断 此时port唯一 是你设置的值 相等直接resolve(port)不相等则会在控制台弹出选择随机port 意味着处于报错状态(可能是由于host 没有配置127.0.0.1)

        if (port === defaultPort) {
          return resolve(port);
        }
        const message =
          process.platform !== 'win32' && defaultPort < 1024 && !isRoot()
            ? `Admin permissions are required to run a server on a port below 1024.`
            : `Something is already running on port ${defaultPort}.`;
        if (isInteractive) {
          // clearConsole();
          const existingProcess = getProcessForPort(defaultPort);
          const question = {
            type: 'confirm',
            name: 'shouldChangePort',
            message:
              chalk.yellow(
                message +
                  `${existingProcess ? ` Probably:\n  ${existingProcess}` : ''}`
              ) + '\n\nWould you like to run the app on another port instead?',
            default: true,
          };
          inquirer.prompt(question).then(answer => {
            if (answer.shouldChangePort) {
              resolve(port);
            } else {
              resolve(null);
            }
          });
        } else {
          console.log(chalk.red(message));
          resolve(null);
        }
      }),
    err => {
      throw new Error(
        chalk.red(`Could not find an open port at ${chalk.bold(host)}.`) +
          '\n' +
          ('Network error message: ' + err.message || err) +
          '\n'
      );
    }
  );
}
<think>我们正在解决VSCode LiveServer启动时出现“Somethingwent wrong”错误的问题。根据引用内容,我们可以采取以下步骤:1.确保已正确安装vscode-live-server扩展,并已重启VSCode。2.尝试通过命令面板手动启动Live Server。3.检查端口冲突(常见问题)。此外,我们还可以考虑其他常见原因和解决方案,例如:4.检查防火墙或安全软件是否阻止了LiveServer使用端口。5.检查项目路径是否包含特殊字符或空格(可能导致问题)。6.更新VS Code和LiveServer扩展至最新版本。下面详细说明解决步骤:</think>### VS Code Live Server 启动报错 "Something went wrong" 解决方案 #### 1. **基础检查** - ✅ **确认扩展安装**:在 VS Code 扩展市场搜索 `Live Server`,确保已安装 Ritwick Dey 开发的官方扩展(500万+下载量)[^1]。 - 🔄 **重启 VS Code**:安装后必须完全关闭并重启编辑器(包括结束后台进程)。 - 🖥️ **手动启动测试**: ```bash 按 F1/Ctrl+Shift+P → 输入 "Live Server: Open with Live Server" ``` #### 2. **端口冲突解决**(常见原因[^1]) - 🔍 **查找占用端口**: ```bash # Windows: netstat -ano | findstr :5500 # macOS/Linux: lsof -i :5500 ``` - ⚙️ **修改默认端口**: 1. VS Code 设置 → 搜索 `liveServer.settings.port` 2. 修改为未占用端口(如 `8080`) #### 3. **权限与路径问题** - 🔓 **以管理员运行**(Windows): - 右键 VS Code → "以管理员身份运行" - 🚫 **检查路径特殊字符**: - 避免路径包含 `#`, `!`, `空格` 等符号 - 示例:将 `C:\my#project\` 改为 `C:\my_project\` #### 4. **扩展环境重置** 1. 卸载 Live Server 扩展 2. 删除配置文件夹: ```bash # Windows: del %USERPROFILE%\.vscode\extensions\ritwickdey.liveserver-* # macOS/Linux: rm -rf ~/.vscode/extensions/ritwickdey.liveserver-* ``` 3. 重新安装扩展并重启 #### 5. **终极解决方案** 若上述步骤无效: - ⚡ **禁用硬件加速**: 在 VS Code 设置添加: ```json "disable-hardware-acceleration": true ``` - 📁 **创建工作区配置**: 在项目根目录创建 `.vscode/settings.json`: ```json { "liveServer.settings.CustomBrowser": "chrome", "liveServer.settings.AdvanceCustomBrowserCmdLine": "--disable-gpu" } ``` > 💡 **验证成功标志**:浏览器自动打开 `http://localhost:[端口号]` 并显示目录列表。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值