使用 Vite 的 Quasar CLI - @quasar/app-vite
The ssrContext 对象是 SSR 上下文，所有应用的 Vue 组件都使用它进行渲染。
用法
警告
The ssrContext 对象仅在 SSR 构建中可用，在服务器端编译时（当 process∙env∙SERVER === true 时）。
除其他位置外，它还作为参数提供给启动文件、Vuex 存储和Vue Router初始化函数以及预取方法。
// a boot file
export default ({ ..., ssrContext }) => { /* ... */ }
// src/router/index.[js|ts]
export default ({ ..., ssrContext }) { /* ... */ }
// src/store/index.[js|ts]
export default ({ ..., ssrContext }) { /* ... */ }
// with preFetch:
preFetch ({ ..., ssrContext }) { /* ... */ }内容粘贴
您也可以在 Vue 组件中访问 ssrContext。下面是两个示例，一个使用组合 API，另一个使用选项 API。
import { useSSRContext } from 'vue'
export default {
// ...
setup () {
// we need to guard it and call it only on SSR server-side:
const ssrContext = process.env.SERVER ? useSSRContext() : null
// ...do something with it
}
}内容粘贴
ssrContext 的结构
ssrContext: {
req, // Express.js object
res, // Express.js object
$q, // The Quasar's $q Object
state, // The Vuex state (ONLY if using the Vuex store)
nonce, // (optional to set it yourself)
// The global "nonce" attribute to use
onRendered, // Registers a function to be executed server-side after
// app has been rendered with Vue. You might need this
// to access ssrContext again after it has been fully processed.
// Example: ssrContext.onRendered(() => { /* ... */ })
rendered // (optional to set it yourself)
// Set this to a function which will be executed server-side
// after the app has been rendered with Vue.
// We recommend using the "onRendered" instead.
//
// Purpose: backward compatibility with Vue ecosystem packages
// (like @vue/apollo-ssr)
// Example: ssrContext.rendered = () => { /* ... */ }
}内容粘贴
有关“nonce”属性用途的更多信息，请参见MDN。
The req 和 res 是 Express.js 用于当前服务器客户端的对象。 req 的一个用例是访问 req.url 以获取客户端请求的 URL。
提示
随意将您自己的内容注入到 ssrContext 中，但不要修改任何私有属性（以下划线开头的属性，例如 _someProp）。