Nuxt 3执行yarn dev遇fsevents错误及503问题求助

问题描述 #

通过nuxt init创建Nuxt 3网站项目，选择Yarn作为包管理器。执行yarn run dev时出现fsevents错误，访问localhost:3000返回503错误，已尝试Stack Overflow相关解决方案但未解决，寻求技术支持。

本地环境 #

• Macbook M2 Pro
• Yarn v1.22.22
• Nuxt 3.11.2
• Nitro 2.9.6
• Node.js v21.5.0

项目配置文件 #

nuxt.config.ts #

export default defineNuxtConfig({
  devtools: { enabled: true },

  vite: {
    optimizeDeps: { exclude: ["fsevents"] },
  },

  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  
  $development: {
    //
  }
})

package.json #

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.11.2",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  },
  "devDependencies": {}
}

.env #

NUXT_PUBLIC_BASE_URL="http://localhost:3000"
#NUXT_PUBLIC_API_BASE="http://localhost:8000/api"

解决方案 #

1. 清理依赖并重新安装 #

执行以下命令彻底清理后重装依赖：

rm -rf node_modules yarn.lock
yarn install --frozen-lockfile
yarn postinstall

2. 调整Vite配置优化文件系统兼容性 #

在nuxt.config.ts中添加Vite服务端文件系统宽松模式，同时保留fsevents排除配置：

export default defineNuxtConfig({
  devtools: { enabled: true },

  vite: {
    optimizeDeps: { exclude: ["fsevents"] },
    server: {
      fs: {
        strict: false
      }
    }
  },

  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  
  $development: {
    //
  }
})

3. 切换Node.js至LTS版本 #

Node.js v21为非LTS版本，可能存在兼容性问题，建议切换到v20.x LTS版本：

# 若已安装nvm
nvm install 20
nvm use 20

# 切换后重新执行依赖安装与启动
rm -rf node_modules yarn.lock
yarn install
yarn dev

4. 检查并释放3000端口 #

确认3000端口是否被其他进程占用：

lsof -i :3000

若存在占用进程，执行以下命令终止：

kill -9 <进程PID>

之后重新启动项目。

5. 临时禁用Nuxt DevTools排查冲突 #

关闭devtools尝试启动，排查是否为devtools导致的问题：

export default defineNuxtConfig({
  devtools: { enabled: false },
  // 其余配置保持不变
})

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