close
logologo
指南
配置
插件
API
社区
版本
更新日志
Rsbuild 0.x 文档
English
简体中文
指南
配置
插件
API
社区
更新日志
Rsbuild 0.x 文档
English
简体中文
logologo
Overview
root
mode
plugins
logLevel
environments

dev

dev.assetPrefix
dev.browserLogs
dev.cliShortcuts
dev.client
dev.hmr
dev.lazyCompilation
dev.liveReload
dev.progressBar
dev.setupMiddlewares
dev.watchFiles
dev.writeToDisk

resolve

resolve.aliasStrategy
resolve.alias
resolve.conditionNames
resolve.dedupe
resolve.extensions
resolve.mainFields

source

source.assetsInclude
source.decorators
source.define
source.entry
source.exclude
source.include
source.preEntry
source.transformImport
source.tsconfigPath

output

output.assetPrefix
output.charset
output.cleanDistPath
output.copy
output.cssModules
output.dataUriLimit
output.distPath
output.emitAssets
output.emitCss
output.externals
output.filenameHash
output.filename
output.injectStyles
output.inlineScripts
output.inlineStyles
output.legalComments
output.manifest
output.minify
output.module
output.overrideBrowserslist
output.polyfill
output.sourceMap
output.target

html

html.appIcon
html.crossorigin
html.favicon
html.inject
html.meta
html.mountId
html.outputStructure
html.scriptLoading
html.tags
html.templateParameters
html.template
html.title

server

server.base
server.compress
server.cors
server.headers
server.historyApiFallback
server.host
server.htmlFallback
server.https
server.middlewareMode
server.open
server.port
server.printUrls
server.proxy
server.publicDir
server.strictPort

security

security.nonce
security.sri

tools

tools.bundlerChain
tools.cssExtract
tools.cssLoader
tools.htmlPlugin
tools.lightningcssLoader
tools.postcss
tools.rspack
tools.styleLoader
tools.swc

performance

performance.buildCache
performance.bundleAnalyze
performance.chunkSplit
performance.dnsPrefetch
performance.preconnect
performance.prefetch
performance.preload
performance.printFileSize
performance.profile
performance.removeConsole
performance.removeMomentLocale

moduleFederation

moduleFederation.options
📝 在 GitHub 上编辑此页
上一页output.target
下一页html.crossorigin

#html.appIcon

  • 类型:
type AppIconItem = {
  src: string;
  size: number;
  target?: 'apple-touch-icon' | 'web-app-manifest';
  purpose?: string;
};

type AppIcon = {
  name?: string;
  icons: AppIconItem[];
  filename?: string;
};
  • 默认值: undefined

设置 Web 应用的图标,用于在添加到移动设备的主屏幕时显示:

  • 生成 web app manifest 文件和其中的 icons 字段。
  • 生成 HTML 文件中的 apple-touch-icon 标签和 manifest 标签。
TIP

参考以下文档来了解更多信息:

  • MDN - Web app manifests
  • How to Favicon: Six files that fit most needs

#示例

你需要准备多个不同大小的图标,以便在不同设备上显示。

最常用的图标大小是 192x192 和 512x512,你也可以根据需要来自定义图标大小和图标数量。

export default {
  html: {
    appIcon: {
      name: 'My Website',
      icons: [
        { src: './src/assets/icon-192.png', size: 192 },
        { src: './src/assets/icon-512.png', size: 512 },
      ],
    },
  },
};

编译后,HTML 中自动生成了以下标签:

<link rel="manifest" href="/manifest.webmanifest" />
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/static/image/icon-192.png"
/>

其中,manifest.webmanifest 是一个 JSON 文件,包含了应用的名称和图标等信息。

{
  "name": "My Website",
  "icons": [
    {
      "src": "/static/image/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/image/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
图标大小

对于 Chrome,你至少需要提供 192x192 像素的图标和 512x512 像素的图标。如果仅提供这两种图标大小,Chrome 会自动缩放图标以适应设备大小。如果你希望缩放自己的图标,并调整图标以实现像素完美,请以 48dp 为增量提供图标。

#name

  • 类型: string
  • 默认值: undefined

应用的名称,用于在添加到移动设备的主屏幕时显示。如果未设置,则不会生成 manifest.webmanifest 文件。

详见 Web app manifests - name。

#icons

  • 类型: AppIconItem[]
  • 默认值: undefined

图标列表,其中:

  • src 是图标的路径,可以是 URL 地址、文件的绝对路径,或是相对于项目 root 的相对路径。
  • size 是图标的大小,以像素为单位。
  • target 是图标的目标,可以是 apple-touch-icon 或 web-app-manifest。如果未设置 target,默认情况下,manifest 文件会包含所有的图标,而 apple-touch-icon 标签只会包含小于 200x200 的图标。
  • purpose 是一个区分大小写的字符串,用于指定浏览器或操作系统在何种场景下可以使用该图标。该字段仅在 target 为 'web-app-manifest' 时生效。更多信息请参考 MDN - purpose。

#示例

src 可以设置为绝对路径:

import path from 'node:path';

export default {
  html: {
    appIcon: {
      name: 'My Website',
      icons: [
        { src: path.resolve(__dirname, './assets/icon-192.png'), size: 192 },
        { src: path.resolve(__dirname, './assets/icon-512.png'), size: 512 },
      ],
    },
  },
};

使用 target 选项来指定图标的目标:

export default {
  html: {
    appIcon: {
      name: 'My Website',
      icons: [
        {
          src: './src/assets/icon-180.png',
          size: 180,
          target: 'apple-touch-icon',
        },
        {
          src: './src/assets/icon-192.png',
          size: 192,
          target: 'web-app-manifest',
        },
        {
          src: './src/assets/icon-512.png',
          size: 512,
          target: 'web-app-manifest',
        },
      ],
    },
  },
};

#filename

  • 类型: string
  • 默认值: 'manifest.webmanifest'

manifest 文件的文件名。

export default {
  html: {
    appIcon: {
      filename: 'manifest.json',
    },
  },
};

#版本历史

版本变更内容
v1.5.5新增对 purpose 选项的支持