仅使用 Nuxt 进行服务器端渲染一页

Posted 2023-02-23

【中文标题】仅使用 Nuxt 进行服务器端渲染一页

【英文标题】：using Nuxt for server-side-rendering just for one page

【发布时间】：2021-01-01 03:30:44

【问题描述】：

我的面板是由 vuejs 和 vuetify 开发的，它使用 v-router 来管理客户端的路由，实际上我已经开发了大约 70% 的面板，并且由于最终的更改，我必须处理服务器发布请求仅从支付页面返回。 我想将 NUXT 用于 s-s-r，但问题是 NUXT 忽略了我过去的所有路由，因为它本身没有这些路由。 我的问题是，当我的面板在客户端正常工作时，NUXT 是否只能用于在服务器向客户端发出请求后仅加载一页？ 我是网络编程的新手，我希望我提出了正确的问题。无论如何，感谢您的所有帮助。

我在没有 index.vue 文件的 pages 目录中添加了 nos-s-r.vue（这是该目录中唯一的组件，其余的 vue 组件都放在 Components 目录中）。 我将 [https://***.com/questions/54289615/how-to-read-post-request-parameters-in-nuxtjs][1] 用于自定义中间件和发布请求句柄类。

这里是 postRequestHandle.js：

const querystring = require('querystring');

module.exports = function (req, res, next) 
    let body = '';

    req.on('data', (data) => 
        console.log("post request data",data)

        body += data;
    );

    req.on('end', () => 
        req.body = querystring.parse(body) || ;
        console.log("post request handler",req.body)

        next();
    );
;

和 nuxt.config.js

export default 
    devServer: 
        host: 'mypanel.test.net',
        port: 8080,
        disableHostCheck: true,
        hotOnly: true,

    ,

    serverMiddleware: [
         path: '/clickout', handler: './server-middleware/postRequestHandler.js' ,

    ],
    layout(context) 
        return 'nos-s-r'
    

【参考方案1】：

您可以通过在 serverMiddleware 中设置 res.spa = true 来禁用除特定页面之外的每个页面的 s-s-r

export default function(req, res, next) 
  if (req.url !== '/clickout') 
    res.spa = true;
   
  next();

另请参阅：Nuxt Issue: Per-route s-s-r

【讨论】：

谢谢，这为我节省了一天的时间。 ?

【参考方案2】：

在 Nuxt 中创建一个名为 nos-s-r.vue 的额外布局，使其第一个元素成为 <client-only> 元素。在除 s-s-r 呈现的页面之外的每个页面上，您都放置以下内容：

export default 
  layout: 'nos-s-r'

有关 Nuxt 布局的更多信息，请查看https://nuxtjs.org/guides/directory-structure/layouts/

【讨论】：

首先，非常感谢您的回复。我编辑了我的问题，添加了您建议的任何内容，但不幸的是，当我从 postman 发送请求时，我看不到我在 postRequestHandle 中添加的任何日志。你能告诉我哪里出错了吗？

@Qazali 我不太确定你的意思

您的建议使我自己的路由工作，但我无法收听来自服务器的请求。当我收到来自服务器的发布请求时，我想收听mypanel.test.net:8080/clickout 以呈现新组件。跨度>

你能告诉我你检索数据的代码吗？

当然。在我添加到我的问题的 postRequestHandle.js 中，我正在等待 req.on 方法中的服务器响应。