|
|
<!DOCTYPE html>
|
|
|
<html lang="en-US" dir="ltr">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
<title>Asset Handling | VitePress</title>
|
|
|
<meta name="description" content="Vite & Vue powered static site generator.">
|
|
|
<meta name="generator" content="VitePress v1.6.4">
|
|
|
<link rel="preload stylesheet" href="/vitepress/v1/assets/style.wBANWwE3.css" as="style">
|
|
|
<link rel="preload stylesheet" href="/vitepress/v1/vp-icons.css" as="style">
|
|
|
<script type="module" src="/vitepress/v1/assets/chunks/metadata.1b805bca.js"></script>
|
|
|
<script type="module" src="/vitepress/v1/assets/app.ObmQnk_B.js"></script>
|
|
|
<link rel="preload" href="/vitepress/v1/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
|
|
<link rel="modulepreload" href="/vitepress/v1/assets/chunks/theme.COmgkQ2m.js">
|
|
|
<link rel="modulepreload" href="/vitepress/v1/assets/chunks/framework.C1C4sYC0.js">
|
|
|
<link rel="modulepreload" href="/vitepress/v1/assets/guide_asset-handling.md.Bmi0wNc2.lean.js">
|
|
|
<link rel="icon" type="image/svg+xml" href="/vitepress-logo-mini.svg">
|
|
|
<link rel="icon" type="image/png" href="/vitepress-logo-mini.png">
|
|
|
<meta name="theme-color" content="#5f67ee">
|
|
|
<meta property="og:type" content="website">
|
|
|
<meta property="og:locale" content="en">
|
|
|
<meta property="og:title" content="VitePress | Vite & Vue Powered Static Site Generator">
|
|
|
<meta property="og:site_name" content="VitePress">
|
|
|
<meta property="og:image" content="https://vitepress.dev/vitepress-og.jpg">
|
|
|
<meta property="og:url" content="https://vitepress.dev/">
|
|
|
<script src="https://cdn.usefathom.com/script.js" data-site="AZBRSFGG" data-spa="auto" defer></script>
|
|
|
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
|
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="app"><div class="Layout" data-v-24d6a1ec><!--[--><!--]--><!--[--><span tabindex="-1" data-v-6d358b95></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-6d358b95>Skip to content</a><!--]--><!----><header class="VPNav" data-v-24d6a1ec data-v-a3bfa20d><div class="VPNavBar" data-v-a3bfa20d data-v-2e8dfb4b><div class="wrapper" data-v-2e8dfb4b><div class="container" data-v-2e8dfb4b><div class="title" data-v-2e8dfb4b><div class="VPNavBarTitle has-sidebar" data-v-2e8dfb4b data-v-ab8df553><a class="title" href="/vitepress/v1/" data-v-ab8df553><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vitepress/v1/vitepress-logo-mini.svg" width="24" height="24" alt data-v-857f4fa7><!--]--><span data-v-ab8df553>VitePress</span><!--[--><!--]--></a></div></div><div class="content" data-v-2e8dfb4b><div class="content-body" data-v-2e8dfb4b><!--[--><!--]--><div class="VPNavBarSearch search" data-v-2e8dfb4b><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-2e8dfb4b data-v-06cc176e><span id="main-nav-aria-label" class="visually-hidden" data-v-06cc176e> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vitepress/v1/guide/what-is-vitepress" tabindex="0" data-v-06cc176e data-v-1e5c3b26><!--[--><span data-v-1e5c3b26>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vitepress/v1/reference/site-config" tabindex="0" data-v-06cc176e data-v-1e5c3b26><!--[--><span data-v-1e5c3b26>Reference</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-06cc176e data-v-d85ac99d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-d85ac99d><span class="text" data-v-d85ac99d><!----><span data-v-d85ac99d>1.6.4</span><span class="vpi-chevron-down text-icon" data-v-d85ac99d></span></span></button><div class="menu" data-v-d85ac99d><div class="VPMenu" data-v-d85ac99d data-v-c8d7041b><div class="items" data-v-c8d7041b><!--[--><!--[--><div class="VPMenuLink" data-v-c8d7041b data-v-1b571f26><a class="VPLink link vp-external-link-icon" href="https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-1b571f26><!--[--><span data-v-1b571f26>Changelog</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c8d7041b data-v-1b571f26><a class="VPLink link vp-external-link-icon" href="https://github.com/vuejs/vitepress/blob/main/.github/contributing.md" target="_blank" rel="noreferrer" data-v-1b571f26><!--[--><span data-v-1b571f26>Contributing</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-2e8dfb4b data-v-492a0c8e data-v-d85ac99d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-d85ac99d><span class="text" data-v-d85ac99d><span class="vpi-languages option-icon" data-v-d85ac99d></span><!----><span class="vpi-chevron-down text-icon" data-v-d85ac99d></span></span></button><div class="menu" data-v-d85ac99d><div class="VPMenu" data-v-d85ac99d data-v-c8d7041b><!----><!--[--><!--[--><div class="items" data-v-492a0c8e><p class="title" data-v-492a0c8e>English</p><!--[--><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/zh/guide/asset-handling" data-v-1b571f26><!--[--><span data-v-1b571f26>简体中文</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/pt/guide/asset-handling" data-v-1b571f26><!--[--><span data-v-1b571f26>Português</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/ru/guide/asset-handling" data-v-1b571f26><!--[--><span data-v-1b571f26>Русский</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/es/guide/asset-handling" data-v-1b571f26><!--[--><span data-v-1b571f26>Español</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/ko/guide/asset-handling" data-v-1b571f26><!--[--><span data-v-1b571f26>한국어</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/fa/guide/asset-handling" data-v-1b571f26><!--[--><span data-v-1b571f26>فارسی</span><!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="VPNavBarAppearance appearance" data-v-2e8dfb4b data-v-27fdb0e5><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-27fdb0e5 data-v-b2703078 data-v-f3ad3c44><span class="check" data-v-f3ad3c44><span class="icon" data-v-f3ad3c44><!--[--><span class="vpi-sun sun" data-v-b2703078></span><span class="vpi-moon moon" data-v-b2703078></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-2e8dfb4b data-v-331b41bb data-v-c0ed24e6><!--[--><a class="VPSocialLink no-icon" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-c0ed24e6 data-v-0ec81c6a><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-2e8dfb4b data-v-cc29fe84 data-v-d85ac99d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-d85ac99d><span class="vpi-more-horizontal icon" data-v-d85ac99d></span></button><div class="menu" data-v-d85ac99d><div class="VPMenu" data-v-d85ac99d data-v-c8d7041b><!----><!--[--><!--[--><div class="group translations" data-v-cc29fe84><p class="trans-title" data-v-cc29fe84>English</p><!--[--><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/zh/guide/asset-handling" data-v-1b571f26><!--[--><span data-v-1b571f26>简体中文</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/pt/guide/asset-handling" data-v-1b571f26><!--[--><span data-v-1b571f26>Português</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/ru/guide/asset-handling" data-v-1b571f26><!--[--><span data-v-1b571f26>Русский</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/es/guide/asset-handling" data-v-1b571f26><!--[--><span data-v-1b571f26>Español</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/ko/guide/asset-handling" data-v-1b571f26><!--[--><span data-v-1b571f26>한국어</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/fa/guide/asset-handling" data-v-1b571f26><!--[--><span data-v-1b571f26>فارسی</span><!--]--></a></div><!--]--></div><div class="group" data-v-cc29fe84><div class="item appearance" data-v-cc29fe84><p class="label" data-v-cc29fe84>Appearance</p><div class="appearance-action" data-v-cc29fe84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-cc29fe84 data-v-b2703078 data-v-f3ad3c44><span class="check" data-v-f3ad3c44><span class="icon" data-v-f3ad3c44><!--[--><span class="vpi-sun sun" data-v-b2703078></span><span class="vpi-moon moon" data-v-b2703078></span><!--]--></span></span></button></div></div></div><div class="group" data-v-cc29fe84><div class="item social-links" data-v-cc29fe84><div class="VPSocialLinks social-links-list" data-v-cc29fe84 data-v-c0ed24e6><!--[--><a class="VPSocialLink no-icon" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-c0ed24e6 data-v-0ec81c6a><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-2e8dfb4b data-v-8a503b11><span class="container" data-v-8a503b11><span class="top" data-v-8a503b11></span><span class="middle" data-v-8a503b11></span><span class="bottom" data-v-8a503b11></span></span></button></div></div></div></div><div class="divider" data-v-2e8dfb4b><div class="divider-line" data-v-2e8dfb4b></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-24d6a1ec data-v-dbd97c1a><div class="container" data-v-dbd97c1a><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-dbd97c1a><span class="vpi-align-left menu-icon" data-v-dbd97c1a></span><span class="menu-text" data-v-dbd97c1a>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-dbd97c1a data-v-2aa020d0><button data-v-2aa020d0>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-24d6a1ec data-v-38fc5113><div class="curtain" data-v-38fc5113></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-38fc5113><span class="visually-hidden" id="sidebar-aria-label" data-v-38fc5113> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0 collapsible" data-v-0d029714 data-v-132a47f9><div class="item" role="button" tabindex="0" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><h2 class="text" data-v-132a47f9>Introduction</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-132a47f9><span class="vpi-chevron-right caret-icon" data-v-132a47f9></span></div></div><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/what-is-vitepress" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>What is VitePress?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/getting-started" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Getting Started</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/routing" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Routing</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/deploy" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Deploy</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0 collapsible has-active" data-v-0d029714 data-v-132a47f9><div class="item" role="button" tabindex="0" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><h2 class="text" data-v-132a47f9>Writing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-132a47f9><span class="vpi-chevron-right caret-icon" data-v-132a47f9></span></div></div><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/markdown" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Markdown Extensions</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/asset-handling" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Asset Handling</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/frontmatter" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Frontmatter</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/using-vue" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Using Vue in Markdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/i18n" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Internationalization</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0 collapsible" data-v-0d029714 data-v-132a47f9><div class="item" role="button" tabindex="0" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><h2 class="text" data-v-132a47f9>Customization</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-132a47f9><span class="vpi-chevron-right caret-icon" data-v-132a47f9></span></div></div><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/custom-theme" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Using a Custom Theme</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/extending-default-theme" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Extending the Default Theme</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/data-loading" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Build-Time Data Loading</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/ssr-compat" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>SSR Compatibility</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/cms" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Connecting to a CMS</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0 collapsible" data-v-0d029714 data-v-132a47f9><div class="item" role="button" tabindex="0" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><h2 class="text" data-v-132a47f9>Experimental</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-132a47f9><span class="vpi-chevron-right caret-icon" data-v-132a47f9></span></div></div><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/mpa-mode" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>MPA Mode</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/guide/sitemap-generation" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Sitemap Generation</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0" data-v-0d029714 data-v-132a47f9><!----><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/reference/site-config" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Config & API Reference</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-24d6a1ec data-v-c002ede2><div class="VPDoc has-sidebar has-aside" data-v-c002ede2 data-v-b83d2fb8><!--[--><!--]--><div class="container" data-v-b83d2fb8><div class="aside" data-v-b83d2fb8><div class="aside-curtain" data-v-b83d2fb8></div><div class="aside-container" data-v-b83d2fb8><div class="aside-content" data-v-b83d2fb8><div class="VPDocAside" data-v-b83d2fb8 data-v-3117dd8f><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3117dd8f data-v-8f1cb326><div class="content" data-v-8f1cb326><div class="outline-marker" data-v-8f1cb326></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-8f1cb326>On this page</div><ul class="VPDocOutlineItem root" data-v-8f1cb326 data-v-999189d2><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3117dd8f></div><!--[--><!--]--><div class="VPDocAsideCarbonAds" data-v-3117dd8f><div class="VPCarbonAds" data-v-5c72d9ad></div></div><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-b83d2fb8><div class="content-container" data-v-b83d2fb8><!--[--><!--]--><main class="main" data-v-b83d2fb8><div style="position:relative;" class="vp-doc _vitepress_v1_guide_asset-handling" data-v-b83d2fb8><div><h1 id="asset-handling" tabindex="-1">Asset Handling <a class="header-anchor" href="#asset-handling" aria-label="Permalink to "Asset Handling""></a></h1><h2 id="referencing-static-assets" tabindex="-1">Referencing Static Assets <a class="header-anchor" href="#referencing-static-assets" aria-label="Permalink to "Referencing Static Assets""></a></h2><p>All Markdown files are compiled into Vue components and processed by <a href="https://vitejs.dev/guide/assets.html" target="_blank" rel="noreferrer">Vite</a>. You can, <strong>and should</strong>, reference any assets using relative URLs:</p><div class="language-md vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">![</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">An image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">./image.png</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>You can reference static assets in your markdown files, your <code>*.vue</code> components in the theme, styles and plain <code>.css</code> files either using absolute public paths (based on project root) or relative paths (based on your file system). The latter is similar to the behavior you are used to if you have used Vite, Vue CLI, or webpack's <code>file-loader</code>.</p><p>Common image, media, and font filetypes are detected and included as assets automatically.</p><div class="tip custom-block"><p class="custom-block-title">Linked files are not treated as assets</p><p>PDFs or other documents referenced by links within markdown files are not automatically treated as assets. To make linked files accessible, you must manually place them within the <a href="#the-public-directory"><code>public</code></a> directory of your project.</p></div><p>All referenced assets, including those using absolute paths, will be copied to the output directory with a hashed file name in the production build. Never-referenced assets will not be copied. Image assets smaller than 4kb will be base64 inlined - this can be configured via the <a href="./../reference/site-config#vite"><code>vite</code></a> config option.</p><p>All <strong>static</strong> path references, including absolute paths, should be based on your working directory structure.</p><h2 id="the-public-directory" tabindex="-1">The Public Directory <a class="header-anchor" href="#the-public-directory" aria-label="Permalink to "The Public Directory""></a></h2><p>Sometimes you may need to provide static assets that are not directly referenced in any of your Markdown or theme components, or you may want to serve certain files with the original filename. Examples of such files include <code>robots.txt</code>, favicons, and PWA icons.</p><p>You can place these files in the <code>public</code> directory under the <a href="./routing#source-directory">source directory</a>. For example, if your project root is <code>./docs</code> and using default source directory location, then your public directory will be <code>./docs/public</code>.</p><p>Assets placed in <code>public</code> will be copied to the root of the output directory as-is.</p><p>Note that you should reference files placed in <code>public</code> using root absolute path - for example, <code>public/icon.png</code> should always be referenced in source code as <code>/icon.png</code>.</p><h2 id="base-url" tabindex="-1">Base URL <a class="header-anchor" href="#base-url" aria-label="Permalink to "Base URL""></a></h2><p>If your site is deployed to a non-root URL, you will need to set the <code>base</code> option in <code>.vitepress/config.js</code>. For example, if you plan to deploy your site to <code>https://foo.github.io/bar/</code>, then <code>base</code> should be set to <code>'/bar/'</code> (it should always start and end with a slash).</p><p>All your static asset paths are automatically processed to adjust for different <code>base</code> config values. For example, if you have an absolute reference to an asset under <code>public</code> in your markdown:</p><div class="language-md vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">![</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">An image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">/image-inside-public.png</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>You do <strong>not</strong> need to update it when you change the <code>base</code> config value in this case.</p><p>However, if you are authoring a theme component that links to assets dynamically, e.g. an image whose <code>src</code> is based on a theme config value:</p><div class="language-vue vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme.logoPath</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><p>In this case it is recommended to wrap the path with the <a href="./../reference/runtime-api#withbase"><code>withBase</code> helper</a> provided by VitePress:</p><div class="language-vue vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { withBase, useData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"withBase(theme.logoPath)"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-b83d2fb8 data-v-9e12100f><!--[--><!--]--><div class="edit-info" data-v-9e12100f><div class="edit-link" data-v-9e12100f><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/vuejs/vitepress/edit/main/docs/en/guide/asset-handling.md" target="_blank" rel="noreferrer" data-v-9e12100f><!--[--><span class="vpi-square-pen edit-link-icon" data-v-9e12100f></span> Edit this page on GitHub<!--]--></a></div><div class="last-updated" data-v-9e12100f><p class="VPLastUpdated" data-v-9e12100f data-v-3eb659aa>Last updated: <time datetime="2024-06-28T07:46:16.000Z" data-v-3eb659aa></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-9e12100f><span class="visually-hidden" id="doc-footer-aria-label" data-v-9e12100f>Pager</span><div class="pager" data-v-9e12100f><a class="VPLink link pager-link prev" href="/vitepress/v1/guide/markdown" data-v-9e12100f><!--[--><span class="desc" data-v-9e12100f>Previous page</span><span class="title" data-v-9e12100f>Markdown Extensions</span><!--]--></a></div><div class="pager" data-v-9e12100f><a class="VPLink link pager-link next" href="/vitepress/v1/guide/frontmatter" data-v-9e12100f><!--[--><span class="desc" data-v-9e12100f>Next page</span><span class="title" data-v-9e12100f>Frontmatter</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-24d6a1ec data-v-3be7d130><div class="container" data-v-3be7d130><p class="message" data-v-3be7d130>Released under the MIT License.</p><p class="copyright" data-v-3be7d130>Copyright © 2019-present Evan You</p></div></footer><!--[--><!--]--></div></div>
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html> |
