---
title: 总览
sidebar_position: 1
---

# 总览

此节将介绍 Runtime 插件的配置。

## 配置方式

### runtime

- **类型：** `Object`

runtime 配置方式如下：

#### 基本用法

在 `modern.config.ts` 中配置

```ts title="modern.config.ts"
import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  runtime: {
    state: true,
    router: true,
  },
});
```

#### 运行时配置

通过 [`defineConfig`](/apis/app/runtime/app/define-config) API 配置：

:::info
当 runtime 配置中存在函数时，只能使用该方式进行配置。

:::

import { Tabs, Tab as TabItem } from "@theme";

<Tabs>
  <TabItem value="layout" label="约定式路由" default>

```tsx title="src/routes/layout.tsx"
import type { AppConfig } from '@modern-js/runtime';

export const config = (): AppConfig => {
  return {
    router: {
      supportHtml5History: false
    }
  }
};
```

  </TabItem>

  <TabItem value="app" label="自控路由">

```ts title="src/App.tsx"
import { defineConfig } from '@modern-js/runtime';

const App = () => {
  /** */
};

defineConfig(App, {
  router: {
    supportHtml5History: false,
  },
});

export default App;
```

  </TabItem>
</Tabs>

:::info
使用运行时配置，可以解决 Runtime 插件配置需要在运行时才能获取到具体内容问题。

Runtime 插件运行时配置和直接在 `modern.config.ts` 中的配置默认会进行合并，且运行时配置优先级更高。

:::

:::warning
defineConfig 中只能定义 Runtime 插件的具体配置内容，确认是否开启插件还需要通过 `modern.config.ts` 中的配置决定。

:::

### runtimeByEntries

- **类型：** `Object`
- **默认值：**无

#### 说明

按入口添加 runtime 配置，选项属性同 runtime 一致，指定值会和 runtime 属性内容做替换合并操作。

```ts title="modern.config.ts"
import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  runtime: {
    state: false,
  },
  runtimeByEntries: {
    entry1: {
      state: true, // { state: true }
    },
    entry2: {
      // { state: false, router: true }
      router: true,
    },
  },
});
```
