如何在不使用Nuxt的情况下为Vue.js项目添加SSR功能？🔥-原创手记-慕课网

大家好！在这篇文章中，我们将讨论的主要问题是：在没有使用Nuxt.js作为主框架的情况下，让你的Vue.js应用程序实现SSR（服务器端渲染）。

值得考虑的是，这种方法使用SSR，但不进行机器人索引，但仍保留了所有其他优点。

🔗 引入一个第三方库

你可以连接一个叫做HMPL-js的库文件。这是一个相应模板语言的编译器，它扩展了普通HTML的能力。只需将字符串作为compile函数的参数传递，你就可以得到一个现成的DOM元素。它可以直接嵌入到你的应用程序界面中，让我们看看它是怎样的。

    <template>
      <div ref="hmplContainer">
        <!-- 点击器在这里放置 -->
      </div>
    </template>

    <script>
    import { onMounted, ref } from "vue";
    import hmpl from "hmpl-js";

    export default {
      setup() {
        const hmplContainer = ref(null);

        onMounted(() => {
          const templateFn = hmpl.compile(
            `<div>
              <button data-action="increment" id="btn">点这里!</button>
              <div>点击数: {{ src: "/api/clicks", after: "click:#btn" }}</div>
            </div>`
          );

          const clicker = templateFn(({ request: { event } }) => ({
            body: JSON.stringify({ action: event.target.getAttribute("data-action") })
          })).response;

          hmplContainer.value.appendChild(clicker);
        });

        return { hmplContainer };
      }
    };
    </script>

进入全屏模式，退出全屏

在这里，当我们安装应用时，我们会插入一个预制的元素，每次点击 button 时都会更新该元素。此外，点击次数统计将在服务器上进行，我们只会向服务器发送定制请求。

💎 可以看看这个 HMPL-js ★

而这就是一个简单的例子，我们可以去掉 after 属性，直接作为挂载时的加载。这样看起来是这样的：

    <template>
      <div ref="hmplContainer">
        <!-- 这里是头部 -->
      </div>
    </template>

    <script>
    import { onMounted, ref } from "vue";
    import hmpl from "hmpl-js";

    export default {
      setup() {
        const hmplContainer = ref(null);

        onMounted(() => {
          const templateFn = hmpl.compile(
            `<div>
              {{ src: "/api/header" }}
            </div>`
          );

          const header = templateFn().response;
          hmplContainer.value.appendChild(header);
        });

        return { hmplContainer };
      }
    };
    </script>

进入全屏模式，退出全屏模式

因此，使用常规组件时，我们能够直接从服务器获取DOM元素，无需额外的事件触发。可以使用这些块来构建整个页面，使用SSR方法。

👀 看看如何与旧版本的 Vue 进行集成

此外，这种方法对于较早版本的 Vue 非常适用。也就是说，你无需更新到版本 3 或更高版本（视你阅读本文的时间而定）。但是，如果使用 Nuxt.js，尤其是较新版本，则必须这样做。在较早版本中如何实现：

    <template>
      <div ref="hmplContainer">
        <!-- header here -->
      </div>
    </template>

    <script>
    import Vue from "vue";
    import hmpl from "hmpl-js";

    export default Vue.extend({
      data() {
        return {
          hmplContainer: null
        };
      },
      mounted() {
        this.hmplContainer = this.$refs.hmplContainer;
        ...
      }
    });
    </script>

进入全屏开出全屏

在这里，我们将用对象中的常规mounted方法替换onMounted钩子，同时也会稍微调整一下ref。总的来说，不会有太大改动，但这样的功能会非常实用和相关。

✔ 结尾

这种方法将允许你在任何版本的 Vue 应用程序中使用 SSR。此外，它不会强迫你严格遵循框架的限制，你可以将这种方法与其它库结合使用，而不会牺牲交互性或代码的可读性，总的来说，你无需从头开始做很多事情。

我希望这种方法能帮助你让网站变得更小，从而使加载速度更快。

你可以关注作者的推特！

非常感谢大家读这篇文章❤️！

GIF