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

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

以下是我通过express-templatetesting的示例:

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/ :

在我的terminal,我得到:

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

正如你所看到的, 一次调用之后 ,它已经调用了8次以上的api/users

这是Nuxt中的错误吗?

如果我从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发生了什么?

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

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