Any static assets can be placed in the upload/ directory.


In the development environment, the static assets in this directory will be hosted under the /upload path. After building the application, the files in this directory will be copied to the dist directory.

This file convention is mainly used for developers to use plugins to proactively upload static assets to the CDN.


For example, SDKs for project use only, such as google-analysis.js (usually requires HTTP caching).

Pictures, font files, common CSS, etc.

Code Compression

If the file in the directory is a .js file, it will be automatically compressed during production environment construction.

If the file ends with .min.js, it will not be compressed.

More Usage

In React components, you can add this prefix through Environment Variables:

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

In addition, whether it is in Custom HTML or any HTML file under config/public/, you can directly use HTML tags to reference resources in the config/upload/ directory:

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

If you set the dev.assetPrefix or output.assetPrefix prefix, you can also use template syntax to add the prefix directly:

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

Modern.js does not support using files under config/upload/ through URLs in config/public/*.css (such as background-image).