assetPrefix#

• Type: string | 'auto'
• Default: '/'

When using CDN in the production build, you can use this option to set the URL prefix of static assets.

assetPrefix will affect the URLs of most of the static assets, including JavaScript files, CSS files, images, videos, etc. If an incorrect value is specified, you'll receive 404 errors while loading these resources.

This config is only used in the production build. During development, please use the dev.assetPrefix to set the URL prefix.

After setting, the URLs of JavaScript, CSS and other static files will be prefixed with output.assetPrefix:

Example#

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

After building, you can see that the JS files are loaded from:

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

Compare with publicPath#

output.assetPrefix corresponds to the following native configurations:

• output.publicPath configuration in webpack.
• output.publicPath configuration in Rspack.

The differences from the native configuration are as follows:

• output.assetPrefix only takes effect in the production environment.
• output.assetPrefix automatically appends a trailing / by default.
• The value of output.assetPrefix is written to the process.env.ASSET_PREFIX environment variable (can only be accessed in client code).