运行 Nuxt 旁边的 Express 服务器中间件

Question

我的端点无法正常工作，很可能是因为 express 所在的服务器未正确运行ning。我运行我的文件 npm run dev，我的快递文件在 /middleware。我试图从中获取数据的端点位于 /middleware/routes/crash.js 中的路由中。在我的 vue 文件中，我有 axios 执行对 localhost:3000/api/crash/:id 的 get 请求，但是 axios returns 一个 400 错误表明在服务器上运行未找到该文件。

package.json:

"scripts": {
  "dev": "nuxt"
}

/middleware/index.js:

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

const crash = require('./routes/crash')
app.use(crash)

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

/middleware/routes/crash.js:

const { Router } = require('express')
const router = Router()
const crypto = require("crypto");
...
router.get('/api/crash/:id')

Answer 1

您的
中至少需要有这个 nuxt.config.js 文件

export default {
  ssr: true,
  target: 'server',
  modules: [
    '@nuxtjs/axios',
  ],
  serverMiddleware: [
    { path: '/api', handler: '~/server-middleware/rest.js' },
  ],
}

还有一个 /server-middleware/rest.js 文件

const app = require('express')()

app.get('/what-is-my-name/:name', (req, res) => {
  res.json({ name: req.params.name, age: 12 })
})

module.exports = app

然后，您可以在任何 .vue 文件中像这样使用它

<template>
  <div>
    <input id="name" v-model="name" type="text" name="name" />
    <button @click="callNuxtApi">try local Nuxt API</button>
    <div>
      Response from the backend:
      <pre>{{ response }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AccordionList',
  data() {
    return {
      name: 'bob',
      response: {},
    }
  },
  methods: {
    async callNuxtApi() {
      const response = await this.$axios.$get(
        `/api/what-is-my-name/${this.name}`
      )
      this.response = response
    },
  },
}
</script>

然后，这将在本地成功运行（我在这里使用动态 name）。

然后，您需要在 VPS 上部署它，但有一个小问题：您需要部署您的应用和推送 server-middleware 自己创建目录，如此处所述：https://github.com/nuxt/nuxt.js/issues/9158#issuecomment-820676790

因此，像 Render.com 或 Heroku 这样的平台可能不是完成此类任务最简单的平台（我什至不确定这是否可能）。

一些自制的 VPS 或使用 Nuxt3 可能更容易整体 IMO。

运行 Nuxt 旁边的 Express 服务器中间件

Running an Express server middleware alongside Nuxt

javascript

node.js

express

vue.js

nuxt.js