在 Nuxt 中为 AMP 预加载/渲染 ajax 请求答案

【问题标题】：Pre-load/render ajax requests in Nuxt for AMP在 Nuxt 中为 AMP 预加载/渲染 ajax 请求
【发布时间】：2019-12-30 22:39:45
【问题描述】：

最近几天我阅读了很多关于 VueJS 和 AMP 的内容。我的目标是使用 VueJS 创建一个网站/博客，并获得将其部署到 Google 新闻等的选项（与 AMP 相关的内容）。我发现了 NuxtJS，它应该使我能够使用 VueJS 创建 SSR 站点。是的 - 确实如此，但结果仍然是我的 REST 请求使用一些繁重的 JS 来获取一些东西（例如文本、名称）。

我确实可以使用 https://github.com/nuxt-community/amp-module 之类的东西，但这需要我更改大量源代码并使我的源代码与普通浏览器不兼容...

我也有想法使用 NodeJS 为某些路由执行所有 javascript（只有“文章”等会受到影响），但是我不能使用像“v-for”这样的东西——除了我更改源代码本身，但这对我来说最终将是一个巨大的项目。

我的另一个“绝妙”想法是在服务器上启动一个 chromium 实例，让 chromium 渲染所有内容并（但是）获得最终的 DOM。但目前我不是 C++ 开发人员，所以这也是一笔大买卖。

有没有人体验过如何将 VueJS 与 AMP（无需大量更改源代码）或点/文章一起使用？

非常感谢！

【问题讨论】：

标签： javascript vue.js nuxt.js amp-html server-side-rendering

【解决方案1】：

在尝试了很多东西之后，我决定使用 NuxtJS 进行静态渲染（SSR）。

以下是我为 AMP 有效页面采取的步骤：

在没有 JS 的情况下让所有内容都可见（Ajax 逻辑除外）
- 将您的 Ajax 逻辑放入#asyncData -> https://nuxtjs.org/guide/async-data（asyncData 将被提取到 generation 时间）
npm run generate -> 生成静态 html 文件
使用自定义 (Java) 服务器（或编写插件）请求页面（包括 JS）
改变一切
- 在标题中添加“amp”
- 添加 amp 样式和脚本样板（见下文）
- 将<img 更改为<amp-img
- 通过 RegEx 删除所有 JS 标签
- 将<style 更改为<style amp-custom
- 将规范链接添加到您的头部（请参阅https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/?format=websites）
- 获取图像并将高度、宽度和布局属性添加到标签
(https://validator.ampproject.org/)
将页面提供给用户（并缓存）

（未测试）页面示例：

<template>
  <div class="content">
    <div v-if="content != null">{{ content }}</div>
  </div>
</template>

<script>
    import Axios from "axios";

    export default {

        asyncData() {
            return Axios.get(`http://127.0.0.1:8080/content`).then(res => {
                return { content: res.data }
            }).catch(error => {
                console.error(error)
            })
        }
    }
</script>

<style>
</style>

【讨论】：