2017-08-31 4 views
1

なぜNuxtはサーバーを何度も呼びますルート/ページに何度ですか?単一のルート/ページ上でサーバを複数回呼び出す場合のNuxt/Vueバグ?

以下

が、私は彼らの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.vueapi/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.jsconsole.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) 

とき私はアプリを実行し、acc http://127.0.0.1:3000/で私のブラウザ上でそれをESS:

私の端末では、私が得る:

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

あなたはそれが最初呼び出し後api/users8回多くを求めていることを見ることができるように。

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では何が起こっていますか?

答えて

1

これはバグではありません。 Expressがミドルウェアを実行しています。この場合は、app.js,logo.pngなどのクライアントアセットのhttpリクエストです。以下のようにミドルウェアコードを変更し、コンソールを確認します。

app.use(function(req, res, next) { 
    console.log(req.url) // Change this line 
    next() 
}) 
関連する問題