指南
配置
插件
API
教程
社区
指南
配置
插件
API
教程
社区
简体中文

output.ssg

  • 类型： boolean | object
  • 默认值： undefined

开启应用 SSG 功能的配置

开启 SSG 功能

此配置需要在开启 SSG 功能情况下才会生效。请阅读 静态站点生成 文档了解如何开启 SSG 功能及使用场景。

前置阅读

SSG 功能使用与路由关联性较大，建议使用前先了解路由方案。

Boolean 类型

当该配置设置为 true 时，将会默认开启所有入口的 SSG 功能。对自控式路由而言，将会渲染入口的根路由。对约定式路由而言，将会渲染入口中每一条路由。

export default defineConfig({
  output: {
    ssg: true,
  },
});

output.ssg 也可以按照入口配置，配置生效的规则同样由入口路由方式决定。

例如以下目录结构，分别存在约定式路由入口 entryA 和自控式路由入口 entryB：

.
└── src
    ├── entryA
    │   └── routes
    └── entryB
        └── App.tsx

你可以指定 entryA 和 entryB 的不同 SSG 配置：

export default defineConfig({
  output: {
    ssg: {
      entryA: true,
      entryB: false,
    },
  },
});
INFO

更多关于约定式路由和自控式路由在开启 SSG 后的默认行为，请阅读 静态站点生成 。

Object 类型

当值类型为 Object 时，可以配置如下属性。

配置类型

type SSGRouteOptions =
  | string
  | {
      url: string;
      params?: Record<string, any>[];
      headers?: Record<string, any>;
    };

type SSGOptions = {
  preventDefault?: string[];
  headers?: Record<string, any>;
  routes?: SSGRouteOptions[];
};

示例

下面的示例配置中，SSG 会渲染 /、/about 和 /user/:id 三条路由对应的页面。

对于 /user/:id 路由，cookies 添加到请求头中，同时会将 params 中的 id 替换为 modernjs。

modern.config.ts
export default defineConfig({
  output: {
    ssg: {
      routes: [
        '/',
        '/about',
        {
          url: '/user/:id',
          headers: {
            cookies: 'name=modernjs',
          },
          params: [
            {
              id: 'modernjs',
            },
          ],
        },
      ],
    },
  },
});
NOTE

多入口的情况和单入口的配置方式一致，这里不再额外介绍。