执行npm run dev时出现UnhandledPromiseRejectionWarning问题求助

我之前在Vagrant里跑前端项目时也碰到过一模一样的错误！这问题根源很明确：你看到的错误来自opn模块（现在已经改名为open），错误码3意味着它尝试启动浏览器但失败了——毕竟Vagrant虚拟机默认是无头运行的，没有图形界面支持，自然没法弹出浏览器窗口，进而触发了未捕获的Promise拒绝警告。

下面是几个快速解决的方案，按优先级排序：

方案1：直接禁用自动打开浏览器（最推荐） #

大部分前端脚手架（比如Vue CLI、Create React App、Vite）都自带关闭自动打开的配置：

• Vue项目：在项目根目录的vue.config.js中添加配置：

  module.exports = {
    devServer: {
      open: false // 禁用自动打开浏览器
    }
  }
  

• React项目：修改package.json里的启动脚本，加上--no-open参数：

  "scripts": {
    "dev": "react-scripts start --no-open"
  }
  

• Vite项目：在vite.config.js中设置：

  export default {
    server: {
      open: false
    }
  }
  

其他脚手架可以查对应文档，核心都是阻止opn/open模块执行打开浏览器的操作，从根源避免报错。

方案2：给opn的Promise添加错误捕获 #

如果你确实需要保留自动打开功能（比如给Vagrant配置了图形界面转发），可以找到项目中调用opn的代码，手动加上.catch()处理错误：

// 找到项目里调用opn的代码，类似这样
opn('http://localhost:8080')
  .catch(err => {
    console.warn('浏览器启动失败:', err.message); // 捕获错误，避免警告
  });

方案3：检查Vagrant端口转发配置 #

最后别忘了确认你的Vagrant已经正确配置了端口转发，把虚拟机的8080端口映射到宿主机的对应端口。这样你可以在宿主机的浏览器里手动访问http://localhost:8080（或者映射后的自定义端口），正常查看项目。

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