在一个单一的路由/页面多次调用服务器的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.js
, logo.png
等客户资产的http请求。像下面那样更改您的中间件代码并检查控制台。
app.use(function(req, res, next) { console.log(req.url) // Change this line next() })
- Mongoose API通过_id获取数组中的嵌套项
- 与node.js的ntwitter模块错误
- 关于用MEAN Stack创build多租户SAAS应用程序的build议(Mongodb,express,angular,node)
- expressjs代码仅列出在tcpv6端口而不是ipv4
- Keystone jsaudiovideo支持和rethink db连接?
- 正确使用express.js API,比如get,send,redirect
- 路由文件无法在Express.js中更新
- 我如何设置node-mongod-native的日志logging?
- 在express / connect中使用app.use()