为什么要捐赠
API 资源管理器
升级指南
新增!
quasar.config 文件
将项目转换为使用 Vite 的 CLI
浏览器兼容性
支持 TypeScript
目录结构
命令列表
CSS 预处理器
路由
延迟加载 - 代码分割
处理资源
启动文件
预取功能
API 代理
处理 Vite
处理 process.env
使用 Pinia 进行状态管理
使用 Vuex 进行状态管理
代码检查器
测试与审计
开发移动应用
Ajax 请求
向公众开放开发服务器
使用 Vite 的 Quasar CLI - @quasar/app-vite
SSR 升级指南

此页面仅涉及将 Quasar UI v1 应用(使用 Vue 2)升级到 Quasar UI v2 应用(使用 Vue 3)。

从 Quasar v1 升级

Quasar v2 的 SSR 模式几乎完全重写了之前的版本,显著改善了开发者体验。一些更改是由于 Vue 3 的架构要求而必需的。

请注意,目前唯一支持的 Nodejs 服务器是 Expressjs

改进概述

  • 引入了 SSR 中间件 文件的概念,这也在开发过程中允许它们进行热模块替换 (HMR)。这取代了旧的 index.jsextension.js
  • 现在,完全相同的中间件可以在开发和生产构建中运行,而不仅仅是旧的“SSR 扩展”。
  • 您也可以为 SSR 中间件启用代码检查。
  • 由于 Vue 3 的架构,您现在可以(也需要!)为每个自定义 Vue 指令定义 SSR 变换(Quasar 提供的 Vue 指令不包括在内)。
  • 开箱即用地支持 TypeScript。现在,src-ssr 下的所有 .js 文件都可以重写为 .ts。请务必阅读有关 使用 TypeScript 进行 SSR 的更多信息。

/src-ssr 文件夹

旧的结构

index.js
# 用于服务应用程序的生产 Node Web 服务器
extension.js
# 生产和开发服务器的通用代码

新的结构

middlewares/
# SSR 中间件文件
server.js
# SSR Web 服务器生产导出

执行升级

旧的 index.jsextension.js 已被更强大的 SSR 中间件文件取代。在进一步深入之前,最好 了解 SSR 中间件

开始操作

  1. 建议您将当前 src-ssr 文件夹的内容保存到其他位置。
  2. 删除并添加回 Quasar SSR 模式($ quasar mode remove ssr$quasar mode add ssr)。
  3. 在 quasar.config 文件 > ssr > middlewares: [] 下声明中间件文件。数组应如下所示
middlewares: [
  'render' // should always keep this one as last one
]
  1. 然后,您需要使用 SSR 中间件文件移植旧逻辑,这应该非常容易(因为您最终会将大部分旧代码复制粘贴到中间件文件中)。
  2. 查看 quasar.config 文件 > ssr 属性。大多数旧属性已被删除并替换为 新的属性
  3. 检查新的 /src-ssr/server.js 文件。

还要记住,您在 src-ssr/middlewares 文件夹中创建的文件也需要在 quasar.config 文件 > ssr > middlewares 下声明。这是因为它们的顺序很重要,就像应用任何 Expressjs 中间件的顺序也很重要一样。您可以使用 $ quasar new ssrmiddleware <name> 命令来加快速度。

始终将原始的 render 中间件保留为列表中的最后一个。

提示

  • 您可能需要查看通过 quasar.config 文件 > ssr 可用的 新配置 属性。
  • 您可能需要查看 ssrContext 页面,其中详细描述了您可以从中使用哪些属性。
  • 您可能需要查看 SSR Web 服务器 页面,其中详细描述了 server.js 可以为您做什么。