You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Nuxt3中Express.js无法正常响应请求,求排查错误原因

Nuxt3集成Express无响应问题排查

问题概述

在Nuxt3项目中集成Express.js后,访问localhost:3000和localhost:3000/test均无法获取响应,已配置nuxt.config.ts和server-middleware/index.ts文件,相关代码及项目结构如下:

配置代码

nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config

export default defineNuxtConfig({
    ssr: true,
    css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'],
    build: {
        transpile: ['vuetify'],
        // @ts-ignore
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                },
            },
        },
    },
    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    },
    serverMiddleware: [
        // Will register file from project server-middleware directory to handle /api/* requests
        '~/server-middleware/index.ts'
    ],

    /*css: [
        '@/assets/css/main.css',
    ],*/
});

server-middleware/index.ts

import express from "express";
const app = express();

app.use(express.json());
app.use(express.json())
app.use(express.urlencoded({ extended: false }))

app.get( "/", ( req, res ) => {
    res.send( "Hello world!" );
} );


app.get("/test", (req, res) => {
    res.status(200).json({ message: "I work" });
})

module.exports = {
    path: '/server-middleware',
    handler: app
}

项目结构

项目结构

问题根源及解决办法

  • 路由前缀限制:你在server-middleware/index.ts中设置了path: '/server-middleware',这会让所有Express路由自动带上/server-middleware前缀,而非根路径。当前正确的访问路径应为localhost:3000/server-middleware和localhost:3000/server-middleware/test。
  • 根路径挂载配置错误:若希望Express接管根路径,需调整导出配置:
    // 方案一:明确设置根路径前缀
    export default {
        path: '/',
        handler: app
    }
    // 方案二:直接导出app实例(默认挂载到根路径)
    // export default app;
    
  • 冗余代码:代码中重复调用了app.use(express.json()),建议删除其中一个,优化代码整洁度。
  • TS语法不一致:使用import导入模块却用module.exports导出,在TypeScript项目中建议统一使用export default,避免语法混合引发潜在问题。

验证步骤

  1. 修改server-middleware/index.ts的导出逻辑后,重启Nuxt开发服务
  2. 访问localhost:3000应返回Hello world!,访问localhost:3000/test应返回{ "message": "I work" }

内容的提问来源于stack exchange,提问作者freedomisthegoal

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.11 21:35:36