output.assetPrefix

  • 类型: string | 'auto'
  • 默认值: '/'

在部署到生产环境时,可使用该选项设置静态资源的 URL 前缀,比如设置为 CDN 的 URL 地址。

assetPrefix 会影响构建产物中绝大部分静态资源的 URL,包括 JavaScript 文件、CSS 文件、图片、视频等。如果指定了一个错误的值,则在加载这些资源时可能会出现 404 错误。

该配置项仅用于生产环境。在开发环境下,请使用 dev.assetPrefix 配置项进行设置。

示例

设置后,项目的 JavaScript、CSS、图片等静态资源的 URL 都会加上 output.assetPrefix 作为前缀:

export default {
  output: {
    assetPrefix: 'https://cdn.example.com/assets/',
  },
};

构建之后,可以看到 JS 文件从以下地址加载:

<script
  defer
  src="https://cdn.example.com/assets/static/js/main.ebc4ff4f.js"
></script>

路径类型

assetPrefix 可以设置为以下类型的路径:

  • 绝对路径:这是最常见的做法,可以为指定服务器路径,比如 /assets/,或是设置为 CDN 路径,比如 https://cdn.example.com/assets/
  • 'auto':Rspack 将自动计算路径,并生成基于文件所在位置的相对路径。
TIP

不建议将 assetPrefix 设置为相对路径,比如 './assets/'。因为当资源位于不同的路径深度时,使用相对路径可能会导致资源无法正确加载。

对比 publicPath

output.assetPrefix 的功能与 Rspack 的 output.publicPath 配置基本一致。

它与原生配置的区别在于:

  • output.assetPrefix 仅在生产环境下生效。
  • output.assetPrefix 默认会自动补全尾部的 /
  • output.assetPrefix 的值会写入 process.env.ASSET_PREFIX 环境变量(只能在 client 代码中访问)。