在单个路由/页面上多次调用服务器的 Nuxt/Vue 错误？

Question

为什么 Nuxt 在单个路由/页面上多次调用服务器？

下面是我从他们express-template测试的例子：

import express from 'express'
import { Nuxt, Builder } from 'nuxt'

import api from './api'

const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000

app.set('port', port)

app.use(function(req, res, next) {
  console.log(res.headersSent) // <-- pay attention here
  next()
})

// Import API Routes
app.use('/api', api)

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

// Init Nuxt.js
const nuxt = new Nuxt(config)

// Build only in dev mode
if (config.dev) {
  const builder = new Builder(nuxt)
  builder.build()
}

// Give nuxt middleware to express
app.use(nuxt.render)

// Listen the server
app.listen(port, host)
console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console

这个 route/page/index.vue 将调用 api/users:

import axios from '~/plugins/axios'

export default {
  async asyncData () {
    let { data } = await axios.get('/api/users')
    return { users: data }
  },
  head () {
    return {
      title: 'Users'
    }
  }
}

我在plugins/axios.js中添加了一个console.log:

import * as axios from 'axios'

let options = {}
// The server-side needs a full url to works
if (process.server) {
  options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`
  console.log('express:' + options.baseURL)
}

export default axios.create(options)

当我运行应用程序并在我的浏览器上访问它时 http://127.0.0.1:3000/:

在我的终端我得到：

false
express:http://localhost:3000
false 
false
false
false
false
false
false
false

如您所见，它调用了 api/users 8 次 after first呼唤。

它是 Nuxt 中的 bug 吗？

如果我从 server/index.js 中删除 app.use(nuxt.render)：

// Give nuxt middleware to express
// app.use(nuxt.render)

然后我在 http://127.0.0.1:3000/ 或 http://127.0.0.1:3000/api/users 访问它，我得到：

false

只要一个调用是正确的。

那么，Nuxt 是怎么回事？

Answer 1

这不是错误。 Express 正在执行你的中间件。在这种情况下，它们是对 app.js、logo.png 等客户端资产的 http 请求。像下面这样更改中间件代码并检查控制台。

app.use(function(req, res, next) {
   console.log(req.url) // Change this line
   next()
})

在单个路由/页面上多次调用服务器的 Nuxt/Vue 错误？

Nuxt/ Vue bug for calling server multiple times on a single route/ page?

node.js

express

vue.js

nuxt.js