为什么捐赠
API 浏览器
升级指南
创建新项目
quasar.config 配置文件
从 Webpack 项目转换
浏览器兼容性
TypeScript 支持
目录结构
命令列表
CSS 预处理器
使用 VueRouter 进行页面路由
懒加载 - 代码分割
资源处理
Boot 文件
预取特性
API 代理
配置 Vite
处理 import.meta.env
使用 Pinia 管理状态
代码检查与格式化
测试与审计
开发移动应用
Ajax 请求
开放开发服务器到公网
联系站长
Quasar CLI with Vite - @quasar/app-vite
SSG 配合 PWA 客户端接管

警告!Beta 阶段

Quasar SSG 模式目前处于 “beta” 阶段。根据社区反馈,API 在未来可能会有所变动,因此每次升级 “@quasar/app-vite” 时请留意 release notes。

SSG 可以在首次访问时提供预渲染的 HTML,然后安装 service worker 以支持离线访问和后续导航。以下选项在 /quasar.configssg 配置节中生成:

/quasar.config file

ssg: {
  /**
   * 是否由 PWA 接管客户端,否则为 SPA。
   * @default false
   */
  pwa?: boolean;

  /**
   * 使用 SSG+PWA 时,这是 PWA 客户端回退的
   * index html 文件名。仅用于生产环境。
   *
   * 确保命名不会与 SSG 生成的 html 文件冲突。
   * 它可以有意地与 `clientSideRenderingHtmlFilename` 相同,
   * 以复用同一个应用外壳。
   *
   * @default ssr.pwaOfflineHtmlFilename(如已配置),否则 'offline.html'
   */
  pwaOfflineHtmlFilename?: string;

  /**
   * 扩展/配置 Workbox GenerateSW 选项
   * 指定将应用在 `pwa > extendPWAGenerateSWOptions()` 之上的
   * Workbox 选项。
   *
   * https://developer.chrome.com/docs/workbox/the-ways-of-workbox/
   *
   * 可以是异步的。可以直接修改 "config" 参数,
   * 或返回一个新对象与默认配置合并。
   */
  extendSSGGenerateSWOptions?: (
    config: GenerateSWOptions
  ) => void | GenerateSWOptions | Promise<void | GenerateSWOptions>;

  /**
   * 扩展/配置 Workbox InjectManifest 选项
   * 指定将应用在 `pwa > extendPWAInjectManifestOptions()` 之上的
   * Workbox 选项。
   *
   * https://developer.chrome.com/docs/workbox/the-ways-of-workbox/
   *
   * 可以是异步的。可以直接修改 "config" 参数,
   * 或返回一个新对象与默认配置合并。
   */
  extendSSGInjectManifestOptions?: (
    config: InjectManifestOptions
  ) => void | InjectManifestOptions | Promise<void | InjectManifestOptions>;
}

设置 pwa: true 以启用 PWA 接管。在启用此选项时添加 SSG 模式,也会在需要时安装 PWA 模式。通过常规的 pwa 配置 来配置 manifest、图标、Workbox 模式和 service worker。

生产构建会生成正常的 SSG 页面、PWA 资源和默认位于 dist/ssg/offline.html 的应用外壳。Service worker 使用该外壳作为导航回退。不要将其命名为 index.html,也不要与生成的 SSG 页面同名。

自定义 Workbox

SSG 特定的扩展钩子在对应的 PWA 钩子之后运行:

/quasar.config file

ssg: {
  pwa: true,

  extendSSGGenerateSWOptions (workboxConfig) {
    workboxConfig.navigateFallbackDenylist.push(
      /^\/api\//,
      /^\/admin\//
    )
  }
}

对 Workbox GenerateSW 使用 extendSSGGenerateSWOptions,对 InjectManifest 使用 extendSSGInjectManifestOptions。Service worker 的实际缓存行为取决于这些设置;不应假设每个后续请求都一定从缓存提供。

WARNING

部署整个输出目录,包括 service worker、manifest、图标、Workbox 文件、生成的页面和离线外壳。Service worker 在生产环境中还需要 HTTPS(localhost 除外)。

有关 PWA 的更多信息,请前往 PWA 简介 并阅读整个 PWA 指南章节。