Nuxt3+Express部署疑问：SPA路由应指向哪个文件运行Nuxt应用？

你用Nuxt3、Express、Node.js和Axios搭建的应用本地运行完全正常，但部署到Vercel或Heroku时出现问题，核心是搞不清Express生产环境配置中app.get(/.*/, ...)该指向哪个文件，才能让应用在本地及部署后都正常运行。

先明确Nuxt3的构建产物路径 #

Nuxt3在生产构建时，不同模式下的输出目录和入口文件完全不同：

• 服务端渲染（SSR）/混合模式：执行nuxt build会生成dist目录，核心运行文件为dist/server/index.mjs，这种场景下不需要手动用Express接管路由，直接让Express集成Nuxt服务更可靠。
• 纯SPA/静态站点模式：执行nuxt generate会生成.output/public目录，入口文件是该目录下的index.html，这才是你需要指向的正确文件。

对应Express的正确配置 #

场景1：SSR/混合模式 #

放弃手动写路由 fallback，改成让Express挂载Nuxt的服务：

const { loadNuxt } = require('@nuxt/kit')
const express = require('express')
const app = express()

async function start() {
  const nuxt = await loadNuxt({ dev: process.env.NODE_ENV !== 'production' })
  // 将Nuxt的路由系统挂载到Express
  app.use(nuxt.server.app)
  
  const port = process.env.PORT || 3000
  app.listen(port, () => {
    console.log(`Server running on port ${port}`)
  })
}

start()

场景2：纯SPA/静态模式 #

修改你的Express代码，指向Nuxt生成的静态目录和入口文件：

const express = require('express')
const path = require('path')
const app = express()

if (process.env.NODE_ENV === 'production'){
    // 指向Nuxt静态构建产物的目录
    const nuxtStaticDir = path.join(__dirname, '.output/public')
    app.use(express.static(nuxtStaticDir))
    // 处理SPA路由 fallback，所有未匹配的路由都返回index.html
    app.get(/.*/, (req,res) => res.sendFile(path.join(nuxtStaticDir, 'index.html')))
}

const port = process.env.PORT || 3000
app.listen(port, () => {
    console.log(`Server running on port ${port}`)
})

注意必须用path.join处理路径，避免不同系统下路径分隔符不兼容的问题。

Vercel/Heroku部署注意事项 #

• Vercel：Vercel原生支持Nuxt3，直接上传仓库即可完成部署。如果需要保留Express后端，需在vercel.json中配置路由规则，让前端页面请求指向Nuxt静态文件，接口请求指向Express服务。
• Heroku：在package.json中把build脚本设置为nuxt build，start脚本设置为node 你的Express入口文件名.js，同时要确保Heroku能安装Nuxt的开发依赖（构建过程需要用到）。

你现有代码的问题 #

你当前指向的__dirname + '/public/views/app.template.html'并非Nuxt3生产构建后的合法文件，Nuxt不会生成该路径的文件，这就是部署后应用无法正常运行的核心原因。

内容的提问来源于stack exchange，提问作者Duck.Jpeg