Asset Handling

This would work the same way as in file templates. The image will be processed with url-loader and file-loader, and copied to appropriate locations in the generated static build.

Also, you can use the ~ prefix to explicitly specify this is a webpack module request, allowing you to reference files with webpack aliases or from npm dependencies:

Sometimes you may need to provide static assets that are not directly referenced in any of your Markdown or theme components - for example, favicons and PWA icons. In such cases, you can put them inside and they will be copied to the root of the generated directory.

If your site is deployed to a non-root URL, you will need to set the base option in .vuepress/config.js. For example, if you plan to deploy your site to https://foo.github.io/bar/, then base should be set to (it should always start and end with a slash).

Note you can use the above syntax not only in theme components, but in your Markdown files as well.

Also, if a is set, it’s automatically prepended to all asset URLs in .vuepress/config.js options.