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

Question

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

我在没有 index.vue 文件的 pages 目录中添加了 nossr.vue（这是该目录中唯一的组件，其余的 vue 组件都放在 Components 目录中）。 我将 [https://stackoverflow.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 'nossr'
    }

}

Answer 1

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

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

另请参阅：
Nuxt Issue: Per-route ssr

Answer 2

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

export default {
  layout: 'nossr'
}

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