|
|
import{_ as e,c as i,ag as a,o}from"./chunks/framework.C1C4sYC0.js";const k=JSON.parse('{"title":"Manipulação de Ativos","description":"","frontmatter":{},"headers":[],"relativePath":"pt/guide/asset-handling.md","filePath":"pt/guide/asset-handling.md","lastUpdated":1709796637000}'),t={name:"pt/guide/asset-handling.md"};function n(r,s,d,l,p,c){return o(),i("div",null,s[0]||(s[0]=[a(`<h1 id="asset-handling" tabindex="-1">Manipulação de Ativos <a class="header-anchor" href="#asset-handling" aria-label="Permalink to "Manipulação de Ativos {#asset-handling}""></a></h1><h2 id="referencing-static-assets" tabindex="-1">Referenciando Ativos Estáticos <a class="header-anchor" href="#referencing-static-assets" aria-label="Permalink to "Referenciando Ativos Estáticos {#referencing-static-assets}""></a></h2><p>Todos os arquivos Markdown são compilados em componentes Vue e processados por <a href="https://vitejs.dev/guide/assets.html" target="_blank" rel="noreferrer">Vite</a>. Você pode <strong>e deve</strong> referenciar quaisquer ativos usando URLs relativas:</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" 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;">Uma imagem</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;">./imagem.png</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>Você pode referenciar ativos estáticos em seus arquivos markdown, seus componentes <code>*.vue</code> no tema, estilos e simples arquivos <code>.css</code>, usando caminhos públicos absolutos (com base na raiz do projeto) ou caminhos relativos (com base em seu sistema de arquivos). Este último é semelhante ao comportamento que você está acostumado se já usou Vite, Vue CLI ou o <code>file-loader</code> do webpack.</p><p>Tipos comuns de arquivos de imagem, mídia e fonte são detectados e incluídos automaticamente como ativos.</p><p>Todos os ativos referenciados, incluindo aqueles usando caminhos absolutos, serão copiados para o diretório de saída com um nome de arquivo hash na compilação de produção. Ativos nunca referenciados não serão copiados. Ativos de imagem menores que 4KB serão incorporados em base64 - isso pode ser configurado pela opção <a href="./../reference/site-config#vite"><code>vite</code></a> da configuração.</p><p>Todas as referências de caminho <strong>estáticas</strong>, incluindo caminhos absolutos, devem ser baseadas na estrutura do seu diretório de trabalho.</p><h2 id="the-public-directory" tabindex="-1">O Diretório Público <a class="header-anchor" href="#the-public-directory" aria-label="Permalink to "O Diretório Público {#the-public-directory}""></a></h2><p>Às vezes, pode ser necessário fornecer ativos estáticos que não são referenciados diretamente em nenhum de seus componentes do tema ou Markdown, ou você pode querer servir certos arquivos com o nome de arquivo original. Exemplos de tais arquivos incluem <code>robots.txt</code>, favicons e ícones PWA.</p><p>Você pode colocar esses arquivos no diretório <code>public</code> sob o <a href="./routing#source-directory">diretório fonte</a>. Por exemplo, se a raiz do seu projeto for <code>./docs</code> e estiver usando a localização padrão do diretório fonte, então o diretório público será <code>./docs/public</code>.</p><p>Os ativos colocados em <code>public</code> serão copiados para a raiz do diretório de saída como são.</p><p>Observe que você deve referenciar arquivos colocados em <code>public</code> usando o caminho absoluto da raiz - por exemplo, <code>public/icon.png</code> deve sempre ser referenciado no código fonte como <code>/icon.png</code>.</p><h2 id="base-url" tabindex="-1">URL Base <a class="header-anchor" href="#base-url" aria-label="Permalink to "URL Base {#base-url}""></a></h2><p>Se seu site for implantado em uma URL que não seja a raiz, será necessário definir a opção <code>base</code> em <code>.vitepress/config.js</code>. Por exemplo, se você planeja implantar seu site em <code>https://foo.github.io/bar/</code>, então <code>base</code> deve ser definido como <code>'/bar/'</code> (sempre deve começar e terminar com uma barra).</p><p>Todos os caminhos dos seus ativos estáticos são processados automaticamente para se ajustar aos diferentes valores de configuração <code>base</code>. Por exemplo, se você tiver uma referência absoluta a um ativo sob <code>public</code> no seu markdown:</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" 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;">Uma imagem</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;">/imagem-dentro-de-public.png</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>Você <strong>não</strong> precisa atualizá-lo quando alterar o valor de configuração <code>base</code> nesse caso.</p><p>No entanto, se você estiver criando um componente de tema que vincula ativos dinamicamente, por exemplo, uma imagem cujo <code>src</code> é baseado em um valor de configuração do tema:</p><div class="language-vue vp-adaptive-theme"><button title="Copiar código" 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>Nesse caso, é recomendável envolver o caminho com o <a href="./../reference/runtime-api#withbase"><code>auxiliar withBase</code></a> fornecido por VitePress:</p><div class="language-vue vp-adaptive-theme"><button title="Copiar código" 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>
|
