output.metaByEntries
- 类型:
Object
- 默认值:
undefined
用于在多页面的场景下,为不同的页面设置不同的 meta 信息。
整体用法与 output.meta 一致,主要区别在于,可以使用「入口名称」作为 key 进行单独设置。
入口名称
默认情况下,「入口名称」为页面入口所在目录的名称。
例如,项目的目录结构如下时,入口名称为 page-a
和 page-b
。
└── src
├── page-a
│ └── App.jsx
└── page-b
└── App.jsx
如果使用 source.entries 自定义了页面入口,则「入口名称」为 source.entries
对象的 key
。
示例
modern.config.js
import { defineConfig } from '@modern-js/app-tools';
export default defineConfig({
output: {
meta: {
viewport: 'width=device-width',
description: '今日头条',
},
metaByEntries: {
'page-a': {
description: '抖音',
},
},
},
});
dev
之后可以看到入口 page-a
和 入口 page-b
的 meta 信息分别如下:
- page-a
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
//...
<meta name="description" content="抖音" />
- page-b
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
//...
<meta name="description" content="今日头条" />
可以看到入口 page-a
的 description
meta 标签被自定义为 抖音
。 入口 page-a
和 page-b
都修改了 viewport
meta 标签。