【问题标题】:Switching between universal & spa mode depending on query string?根据查询字符串在通用和水疗模式之间切换?
【发布时间】:2020-05-16 22:03:14
【问题描述】:

我正在构建一个设置为通用模式的 Nuxt.js 应用程序,并通过 nuxt generate 部署为静态网站。它通过连接到 CMS 的 GraphQL API 提取数据,并且一切正常。当内容在 CMS 中更新时,部署脚本会运行 nuxt generate,并且更新会在几秒钟内显示在网站上。

我的问题是 CMS(Craft CMS)有一个实时预览模式,可以在编辑内容时访问。预览窗口将令牌传递给应用程序,然后应用程序可以根据令牌值修改其查询。这似乎适用于水疗模式,但不适用于通用模式。在通用模式下,生成静态文件时,查询已经在服务器上运行。

我已经尝试使用基于示例here 的服务器中间件进行试验。我forked the code sandbox 并尝试了 serverMiddleware 函数中的各种逻辑,似乎没有任何结果。

【问题讨论】:

    标签: javascript vue.js nuxt.js


    【解决方案1】:

    Nuxt 2.13 有一个可以通过插件设置的预览模式:

    export default async function ({ query, enablePreview }) => {
      if (query.preview) {
        enablePreview()
      }
    }
    

    设置 enablePreview() 后,页面将查询实时 API,而不是使用生成的页面。

    【讨论】:

    • enablePreview() 仅在路由更改时有效。即使在页面刷新时,也不会进行 asyncData 调用。
    • 我在多个站点上使用此代码的一个版本。如果条件匹配,则运行 enablePreview() 并进行 asyncData 调用。 ?
    • 你也可以在你的组件中做这样的事情:mounted () { if ($nuxt.isPreview) { //your preview code here } }
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多