logo
  • 指南
  • 配置
  • 插件
  • API
  • 示例
  • 社区
  • Modern.js 2.x 文档
  • 简体中文
    • 简体中文
    • English
    • 命令
      文件约定
      src/
      App.[tj]sx
      entry.[tj]s
      entry.server.[tj]sx
      modern.runtime.[tj]s
      routes/
      *.[server|node].[tj]sx
      api/
      lambda/*.[tj]s
      server/
      modern.server.[tj]s
      shared/
      config/
      html/
      favicon.*
      icon.*
      mock/
      public/
      upload/
      modern.config.[tj]s
      运行时
      Core
      createRoot
      render
      Router
      router
      SSR
      NoSSR
      renderStreaming
      renderString
      createRequestHandler
      BFF
      useHonoContext
      Utility
      CSS-In-JS API
      Head
      loadable
      📝 编辑此页面
      上一页public/下一页modern.config.[tj]s

      #upload/

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

      #说明

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

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

      #场景

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

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

      #代码压缩

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

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

      #更多用法

      在 React 组件中,可以通过内置环境变量来添加该前缀:

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

      另外,不论是在自定义 HTML 中,或是在 config/public/ 下的任意 HTML 文件中,都可以直接使用 HTML 标签引用 config/upload/ 目录下的资源:

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

      如果设置了 dev.assetPrefix 或 output.assetPrefix 前缀,也可以直接使用模板语法添加该前缀:

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

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