> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# upload/

`upload/` 目录中可以放置任意格式的静态资源文件。

## 说明

在开发环境下，该目录下的静态资源文件会被托管在 `/upload` 路径下。构建应用产物后，该目录下的文件会被复制到产物目录中。

该文件约定主要用于开发者使用插件，主动上传静态资源文件到 CDN。

## 场景

例如 `google-analysis.js` 等项目自用的 SDK（通常需要 HTTP 缓存）。

图片、字体文件、通用 CSS 等。

## 代码压缩

如果目录下的文件是一个 `.js` 文件，在生产环境构建时，会自动对其进行代码压缩。

如果该文件以 `.min.js` 结尾，则不会经过代码压缩处理。

## 更多用法

在 React 组件中，可以通过[内置环境变量](/zh/guides/basic-features/env-vars.md#asset_prefix)来添加该前缀：

```tsx
export default () => {
  return <img src={`${process.env.ASSET_PREFIX}/upload/banner.png`}></img>;
};
```

另外，不论是在 [自定义 HTML](/zh/guides/basic-features/html.md) 中，或是在 [`config/public/`](/zh/apis/app/hooks/config/public.md) 下的任意 HTML 文件中，都可以直接使用 HTML 标签引用 `config/upload/` 目录下的资源：

```html
<script src="/upload/index.js"></script>
```

如果设置了 [`dev.assetPrefix`](/zh/configure/app/dev/asset-prefix.md) 或 [`output.assetPrefix`](/zh/configure/app/output/asset-prefix.md) 前缀，也可以直接使用模板语法添加该前缀：

```html
<script src="<%=assetPrefix %>/upload/index.js"></script>
```

:::info
Modern.js 没有支持在 `config/public/*.css`（例如 background-image）中通过 URL 使用 `config/upload/` 下的文件。

:::