Quasar CLI with Vite - @quasar/app-vite

Vue SSR 指令

警告

此页文档针对于 Quasar v2.6 及其以上的版本。

由于 Vue3 的架构调整,普通的 Vue 指令需要做一些额外的工作后才能在 SSR 模式中正常运行。

SSR 构建服务端时需要所有的 Vue 指令都额外提供一个getSSRProps()方法。

提示

  • 您不需要担心 Quasar 提供的指令,因为它们都为 SSR 模式做了兼容,可以直接运行在 SSR 模式中。
  • 然而,当您使用第三方库提供的 Vue 指令并且报错时,需要考虑作者是否考虑了 vue3 的 SSR 的兼容性(是否在指令的定义中添加了 getSSRProps()方法)

如何声明一个指令

下面的内容来自Vue.js 文档

因为大多数的自定义指令都包含了对 DOM 的直接操作,所以它们会在 SSR 时被忽略。但如果您想要自己控制一个自定义指令在 SSR 时应该如何被渲染 (即应该在渲染的元素上添加哪些 attribute),您可以使用 getSSRProps 指令钩子:

const myDirective = {
  mounted (el, binding) {
    // 客户端实现:
    // 直接更新 DOM
    el.id = binding.value
  },

  getSSRProps (binding) {
   // 服务端实现:
    // 返回需要渲染的 prop
    // getSSRProps 只接收一个 binding 参数
    return {
      id: binding.value
    }
  }
}