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
    }
  }
}