---
title: "资源管理"
description: "Nuxt 为你的资源提供了两种选择。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/getting-started/assets"
---
# 资源管理

> Nuxt 为你的资源提供了两种选择。

Nuxt 使用两个目录来处理样式表、字体或图像等资源。

- [`public/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/public) 目录中的内容会原样在服务器根目录下提供。
- [`assets/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/assets) 目录按照惯例包含所有你希望构建工具（Vite 或 webpack）处理的资源。

## Public 目录

[`public/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/public) 目录用作静态资源的公共服务器，这些资源可通过应用程序中定义的 URL 公开访问。

你可以在应用程序代码中或通过浏览器使用根 URL `/` 获取 [`public/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/public) 目录中的文件。

### 示例

例如，引用位于 `public/img/` 目录中的图像文件，其静态 URL 为 `/img/nuxt.png`：

```vue [app.vue]
<template>
  <img
    src="/img/nuxt.png"
    alt="Discover Nuxt"
  >
</template>
```

## Assets 目录

Nuxt 使用 [Vite](https://vite.dev/guide/assets)（默认）或 [webpack](https://webpack.js.org/guides/asset-management/) 来构建和打包你的应用程序。这些构建工具的主要功能是处理 JavaScript 文件，但它们可以通过 [插件](https://vite.dev/plugins/)（针对 Vite）或 [loaders](https://webpack.js.org/loaders/)（针对 webpack）扩展以处理其他类型的资源，如样式表、字体或 SVG。此步骤会对原始文件进行转换，主要出于性能或缓存的考虑（例如样式表的压缩或浏览器缓存失效）。

按照惯例，Nuxt 使用 [`assets/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/assets) 目录存储这些文件，但此目录不会自动扫描，你也可以为其使用其他名称。

在应用程序代码中，你可以使用 `~/assets/` 路径引用位于 [`assets/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/assets) 目录中的文件。

### 示例

例如，引用一张如果构建工具配置了对应文件扩展名，将会被处理的图片文件：

```vue [app.vue]
<template>
  <img
    src="~/assets/img/nuxt.png"
    alt="Discover Nuxt"
  >
</template>
```

::note
Nuxt 不会通过 `/assets/my-file.png` 这样的静态 URL 提供 [`assets/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/assets) 目录中的文件。如果你需要静态 URL，请使用 [`public/`](https://nuxt.zhcndoc.com/docs/3.x/getting-started/assets#public-directory) 目录。
::


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.