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

介绍

Modern.js 的运行时（Runtime）配置需集中在 src/modern.runtime.ts 文件中声明。

INFO

如果项目中还没有此文件，请执行以下命令创建：

touch src/modern.runtime.ts

基本配置

import { defineRuntimeConfig } from '@modern-js/runtime';

export default defineRuntimeConfig({
  router: {
    // 路由配置
  },
  state: {
    // 状态管理配置
  },
  // 其他运行时模块...
});

多入口配置

对于多入口应用，defineRuntimeConfig 函数可以根据入口名称返回特定的配置：

import { defineRuntimeConfig } from '@modern-js/runtime';

export default defineRuntimeConfig(entryName => {
  if (entryName === 'main') {
    return {
      router: {
        // "main" 入口的路由配置
      },
      state: {
        // "main" 入口的状态管理配置
      },
    };
  }

  // 其他入口的配置
  return {
    masterApp: {
      // 微前端配置示例
    },
  };
});
TIP

使用 src/modern.runtime.ts 配置方式不支持导出异步函数，这与 Modern.js 的渲染方式有关。如果需要添加异步逻辑，请使用 Runtime 插件 (Runtime Plugin)。

WARNING

使用 src/modern.runtime.ts 配置方式需要 Modern.js 版本 2.66.0 或更高版本。

配置方式演进

在 2.66.0 之前，运行时配置分散在多个位置：

  1. modern.config.ts 中的 runtime 和 runtimeByEntries 字段
  2. 各入口的 App.config 或 layout 文件导出的 config 函数

为提升可维护性，Modern.js 引入了统一的 src/modern.runtime.ts 配置入口。

旧配置方式（兼容但不推荐）

// modern.config.ts
export default {
  runtime: {
    /* ... */
  },
  runtimeByEntries: {
    /* ... */
  },
};

// App.config
App.config = {
  /* ... */
};

// layout 文件
export const config = () => {
  /* 动态配置逻辑 */
};

迁移建议

强烈建议将所有运行时配置迁移至 src/modern.runtime.ts。虽然旧配置方式目前仍兼容，但计划在未来版本中逐步废弃。统一配置入口可避免配置分散，显著提高项目可维护性。