警告
本指南适用于 Quasar v2.6+ 版本。
¥This guide refers to usage with Quasar v2.6+
SSR 应用在服务器和客户端上运行相同的代码。在 .vue 单文件函数文件中声明 Vue 指令（或直接导入）通常足以使其在非 SSR 版本中运行。但在服务器端渲染 (SSR) 构建中，由于 Vue 3 的架构，这需要一些额外的工作。
¥A SSR app has the same code running on server and on client. Declaring a Vue directive (or directly importing it) in a .vue SFC file is usually enough for making it to work on non-SSR builds. But on SSR builds and due to the architecture of Vue 3 it requires some extra leg work.
服务器端构建要求所有 Vue 指令在其定义中也指定 getSSRProps() 方法。
¥Server-side builds require all Vue directives to also specify a getSSRProps() method in their definition.
提示
你无需执行任何操作即可使 Quasar 提供的 Vue 指令正常工作。
¥You will NOT need to do anything for the Quasar supplied Vue directives to work.
但是，如果你使用的是第三方提供的 Vue 指令，并且 CLI 出现错误，那么你需要联系该包的所有者，以便他们使其符合 Vue 3 SSR 规范（即在指令定义中添加 getSSRProps() 方法）。
¥However, if you are using a third-party supplied Vue directive and the CLI errors out on it then you will need to contact the owner of that package in order for them to make it compliant with Vue 3 SSR specs (which is to add the getSSRProps() method in the directive’s definition).
如何声明指令(How to declare a directive)
¥How to declare a directive
以下内容摘自 Vue.js 文档：
¥The following is taken from Vue.js docs:
由于大多数自定义指令涉及直接 DOM 操作，因此在服务器端渲染 (SSR) 期间会被忽略。但是，如果你想指定自定义指令的渲染方式（即，它应该向渲染的元素添加哪些属性），你可以使用 getSSRProps 指令钩子：
¥Since most custom directives involve direct DOM manipulation, they are ignored during SSR. However, if you want to specify how a custom directive should be rendered (i.e. what attributes it should add to the rendered element), you can use the getSSRProps directive hook:
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
}
}
}