Vite+React项目运行npm run dev无法自动打开localhost，报错求助

问题背景 #

想要每次执行npm run dev -- --open --port 3000时，自动在新的谷歌浏览器窗口打开localhost。参考配置后，在vite.config.js中添加了如下server配置：

server: {
  port: 'https://localhost:3000/',
  open: true
}

运行后出现以下错误：

node:events:496
      throw er; // Unhandled 'error' event
      ^

Error: spawn undefined\System32\WindowsPowerShell\v1.0\powershell ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:286:19)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:292:12)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn undefined\\System32\\WindowsPowerShell\\v1.0\\powershell',
  path: 'undefined\\System32\\WindowsPowerShell\\v1.0\\powershell',
  spawnargs: [
    '-NoProfile',
    '-NonInteractive',
    '–ExecutionPolicy',
    'Bypass',
    '-EncodedCommand',
    'UwB0AGEAcgB0ACAAIgBoAHQAdABwADoALwAvAGwAbwBjAGEAbABoAG8AcwB0ADoANQA1ADAAMAAwAC8AIgA='
  ]
}

环境信息 #

• React ^18.2.0
• Node.js v20.11.1
• Vite ^4.4.5
• 具备Angular开发经验，执行ng serve --open可正常运行

问题原因 #

1. port配置类型错误：Vite的server.port参数要求是数字类型的端口号，而非完整的URL地址。错误配置的URL导致Vite解析端口失败，进而引发后续打开浏览器的逻辑异常。
2. 路径解析连锁问题：错误日志中的undefined\System32\...路径，是端口配置错误导致Vite无法正确调用系统工具打开浏览器的连锁反应，并非PowerShell本身缺失。

解决建议 #

1. 修正vite.config.js配置 #

将port改为数字3000，并明确指定用Chrome打开新窗口，避免系统默认浏览器识别问题：

server: {
  port: 3000,
  open: {
    app: {
      name: 'chrome',
      arguments: ['--new-window'] // 强制打开新窗口
    }
  }
}

2. 简化启动命令 #

配置生效后，直接执行npm run dev即可自动打开指定端口的Chrome新窗口，无需额外追加-- --open --port 3000参数。若需临时调整端口或关闭自动打开，再在命令后追加对应参数。

3. 环境变量验证（可选） #

若问题仍存在，检查系统PATH环境变量是否包含C:\Windows\System32\WindowsPowerShell\v1.0\，确保PowerShell路径正常。

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