Vue的SSR指令 | Quasar Framework 中文网

Quasar CLI with Webpack - @quasar/app-webpack

Vue的SSR指令

WARNING

This guide refers to usage with Quasar v2.6+ and @quasar/app-webpack v3.4+

一个SSR应用程序有相同的代码在服务器和客户端上运行。在.vue SFC文件中声明一个Vue指令（或直接导入它）通常足以让它在非SSR构建中工作。但在SSR构建中，由于Vue 3的架构（当使用vue-loader处理.vue文件时，像Quasar那样），它需要一些额外的工作。本页将告诉你需要做什么。

当构建你的应用程序的服务器端时，Vue要求你为你的每个自定义Vue指令指定SSR转换，否则它会出错，说它不知道如何在你的SFC模板中处理该特定指令。

TIP

你不需要为Quasar提供的Vue指令工作做任何事情。
然而，如果你使用的是第三方提供的Vue指令，并且CLI在它上面出错，那么你将需要联系该软件包的所有者，以使其符合Vue 3 SSR规范（即在指令的定义中添加getSSRProps()方法）。

如何声明一个指令

以下内容摘自[Vue.js文档]（https://vuejs.org/guide/scaling-up/ssr.html#custom-directives）：

由于大多数自定义指令涉及直接的DOM操作，它们在SSR过程中会被忽略。然而，如果你想指定一个自定义指令应该如何被渲染（即它应该向渲染的元素添加什么属性），你可以使用getSSRProps指令钩子：

const myDirective = {
  mounted (el, binding) {
    // client-side implementation:
    // directly update the DOM
    el.id = binding.value
  },

  getSSRProps (binding) {
    // server-side implementation:
    // return the props to be rendered.
    // getSSRProps only receives the directive binding.
    return {
      id: binding.value
    }
  }
}