Question

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

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

我还想到了使用NodeJS在某些路由上执行所有javascript的想法（仅会影响“文章”等），但后来我将无法使用“ v-for”之类的东西-除了我更改源代码本身，但这最终对我来说将是一个巨大的项目。

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

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

非常感谢！

Answer 1

尝试了许多事情之后，我决定使用NuxtJS进行静态渲染（SSR）。

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

在不使用JS的情况下使所有内容可见（Ajax逻辑除外）
- 将您的Ajax逻辑放入#asyncData-> https://nuxtjs.org/guide/async-data（asyncData将被提取到生成时间）
npm run generate->生成静态html文件
使用自定义（Java）服务器（或编写插件）来请求页面（包括JS）
改变一切
- 在标题中添加“ amp”
- 添加放大器样式和脚本样板（请参见beelow）
- 将<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>

在Nuxt中为AMP

1 个答案: