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 上编辑此页
上一页server.proxy
下一页server.strictPort

#server.publicDir

  • 类型:
type PublicDirOptions = {
  name?: string;
  copyOnBuild?: boolean | 'auto';
  watch?: boolean;
};
type PublicDir = false | PublicDirOptions | PublicDirOptions[];
  • 默认值:
const defaultValue = {
  name: 'public',
  copyOnBuild: 'auto',
  watch: false,
};

默认情况下,Rsbuild 会将 public 目录作为静态资源服务的文件夹,该目录中的文件可在 server.base 路径下访问(默认 /)。

相关文档:public 目录。

#选项

#name

  • 类型: string
  • 默认值: 'public'

public 目录名称。name 的值可以设置为相对路径或绝对路径,相对路径将会相对于项目根目录进行解析。

  • 相对路径示例:
export default {
  server: {
    publicDir: {
      name: '../some-public',
    },
  },
};
  • 绝对路径示例:
import path from 'node:path';

export default {
  server: {
    publicDir: {
      name: path.join(__dirname, '../some-public'),
    },
  },
};

#copyOnBuild

  • 类型: boolean | 'auto'
  • 默认值: 'auto'

在生产构建时,是否将文件从 public 目录复制到构建产物目录。

  • true: 复制文件。
  • false: 不复制文件。
  • 'auto': 当 output.target 不是 'node' 时,会复制文件,否则不复制。
TIP

在 dev 构建时,如果你需要拷贝一些静态资源到构建产物目录,可以使用 output.copy 选项代替。

#禁用

比如关闭 copyOnBuild:

export default {
  server: {
    publicDir: {
      copyOnBuild: false,
    },
  },
};

需要注意的是,将 copyOnBuild 的值为 false 后,如果执行 rsbuild preview 进行生产环境预览,将无法访问对应的静态资源文件。

#Node target

默认情况下,当 output.target 为 'node' 时,Rsbuild 不会复制 public 目录下的文件。

你可以将 copyOnBuild 设置为 true 来为 node target 复制文件:

export default {
  output: {
    target: 'node',
  },
  server: {
    publicDir: {
      copyOnBuild: true,
    },
  },
};

#多环境

当执行 多环境构建 时,Rsbuild 会将文件从 public 目录拷贝到各个环境的输出目录下。如果输出目录存在嵌套的情况,则只会拷贝文件到输出目录的根目录下。例如:

  • web 环境的构建产物目录设置为 dist,web1 环境的构建产物目录设置为 dist/web1。由于 dist 和 dist/web1 存在嵌套关系,此时,public 目录文件仅复制到 dist 目录下。
  • esm 环境的构建产物目录设置为 dist/esm,cjs 环境的构建产物目录设置为 dist/cjs。由于 dist/esm 和 dist/cjs 不存在嵌套关系,此时,public 目录文件将分别复制到 dist/esm 和 dist/cjs 目录下。

#watch

  • 类型: boolean
  • 默认值: false

是否监听 public 目录,并在文件发生变化时重新加载页面。

设置 watch 为 true 后,开发服务器会监听指定公共目录下的文件变化,并在文件发生变化时重新加载页面:

export default {
  server: {
    publicDir: {
      watch: true,
    },
  },
};

需要注意的是,watch 选项仅在开发模式下有效。如果 dev.hmr 和 dev.liveReload 都设置为 false,则 watch 将被忽略。

#多目录

server.publicDir 可以配置为一个数组,这允许你将多个目录作为静态资源服务的文件夹:

export default {
  server: {
    publicDir: [
      {
        name: 'public',
      },
      {
        name: 'assets',
        watch: false,
      },
    ],
  },
};

#禁用

你可以将 publicDir 设置成 false 来禁用静态资源服务:

export default {
  server: {
    publicDir: false,
  },
};