Quasar CLI 与 Webpack - @quasar/app-webpack
此页面仅涉及将 Quasar UI v1 应用(使用 Vue 2)升级到 Quasar UI v2 应用(使用 Vue 3)。
从 Quasar v1 升级
Quasar v2 的 SSR 模式几乎完全重写了先前版本,极大地改善了开发人员体验。由于 Vue 3 的架构要求,一些更改是必要的。
请注意,目前唯一支持的 Nodejs 服务器是 Expressjs。
改进概述
- 引入了 SSR 中间件 文件的概念,这也在开发过程中允许对其进行 HMR。这取代了旧的
index.js
和extension.js
。 - 现在,完全相同的中间件可以在开发和生产构建中运行,而不仅仅是旧的“SSR 扩展”。
- 您也可以为 SSR 中间件启用代码风格检查。
- 由于 Vue 3 的架构,您现在可以(并且需要!)为每个自定义 Vue 指令定义 SSR 转换(Quasar 提供的 Vue 指令不包括在内)。
- 开箱即用地支持 Typescript。现在,
src-ssr
下的所有 .js 文件都可以重写为 .ts。请务必阅读有关 使用 Typescript 进行 SSR 的更多信息。
/src-ssr 文件夹
旧的结构
src-ssr/
index.js
# 用于服务应用的生产环境 Node Web 服务器
extension.js
# 生产环境和开发环境服务器的通用代码
新的结构
src-ssr/
middlewares/
# SSR 中间件文件
production-export.js
# SSR Web 服务器生产环境导出
执行升级
旧的 index.js
和 extension.js
已被更高级的 SSR 中间件文件取代。在进一步深入之前,最好 了解有关 SSR 中间件的信息。
开始吧
- 建议您将当前
src-ssr
文件夹的内容保存到其他地方。 - 删除并重新添加 Quasar SSR 模式(
$ quasar mode remove ssr
,$quasar mode add ssr
)。 - 在 quasar.config 文件 > ssr > middlewares: [] 下声明中间件文件。数组应如下所示
middlewares: [
ctx.prod ? 'compression' : '',
'render' // should always keep this one as last one
]
content_paste
- 然后,您需要使用 SSR 中间件文件移植旧逻辑,这应该非常容易(因为您最终会将大部分旧代码复制粘贴到中间件文件中)。
- 检查 quasar.config 文件 > ssr 属性。大多数旧属性已被删除并替换为 新的属性。
另请记住,您在 src-ssr/middlewares
文件夹中创建的文件也需要在 quasar.config 文件 > ssr > middlewares 下声明。这是因为它们的顺序很重要,就像应用任何 Expressjs 中间件的顺序也很重要一样。您可以使用 $ quasar new ssrmiddleware <name>
命令来加快速度。
始终将原始 render
中间件保留在列表的最后。
提示
- 您可能需要查看通过 quasar.config 文件 > ssr 提供的 新配置 属性。
- 您可能需要查看 ssrContext 页面,其中详细描述了您可以从中使用哪些属性。
- 您可能需要查看 SSR 生产环境导出 页面,其中详细描述了 production-export.js/ts 可以为您做什么。