与 Nuxt 一起运行 Express 服务器中间件

Question

我的端点无法正常工作，很可能是因为 Express 所在的服务器未正常运行。我运行我的文件，并且npm run dev我的快递文件位于/middleware. 我尝试从中获取数据的端点位于/middleware/routes/crash.js. 在我的 vue 文件中，我有 axios 执行 get 请求localhost:3000/api/crash/:id，但是 axios 返回 400 错误，表明尚未发现该文件在服务器上运行。

包.json：

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

/中间件/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/问题/9158#issuecomment-820676790

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

在我看来，一些自制的 VPS 或使用 Nuxt3 可能会更容易。