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

警告!Beta 阶段

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

当在 TypeScript 项目中添加 SSG 模式时,Quasar 会自动创建 /src-ssg/ssg-renderer.ts。在已有的 JavaScript 项目中,将 ssg-renderer.js 重命名为 ssg-renderer.ts 即可;Quasar 能自动识别两种扩展名。

包装函数会推断回调和返回值的类型:

/src-ssg/ssg-renderer.ts

import { defineSsgGetPages } from '#q-app'
import routes from '@/router/routes'

export const getSsgPages = defineSsgGetPages(({ parseVueRouterRoutes }) => {
  const { ssgPages } = parseVueRouterRoutes({ routes, verbose: true })
  return ssgPages
})

仅被渲染器引入的依赖属于 /src-ssg/package.json。如果某个依赖不包含自己的类型声明,将其 @types/* 包作为开发依赖安装在该目录下。