【vue3|第23期】Vite + Vue3: 深入理解public和assets文件夹的作用与使用

日期：2024年8月14日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

---

---

---

一、前言

---

在现代前端开发中，Vite 作为一种快速的开发服务器和生产构建工具，与 Vue3 框架的结合为开发者提供了高效且灵活的项目构建环境。在 Vite + Vue3 的项目结构中，public 和 assets 文件夹扮演着至关重要的角色，它们分别用于存放不同的静态资源，本文将详细介绍这两个文件夹的作用以及图片资源的存放和使用方法。

二、public 文件夹：直接访问的资源，静态资源的家园

---

在 Vite 项目中，public 文件夹扮演着一个特殊的角色。这是一个预定义的文件夹，用于存放不需要经过任何处理的静态资源文件。这些文件会原封不动地被复制到最终的构建输出目录（通常是 dist），并且可以直接通过绝对路径访问。

1、作用

• 静态资源托管： 存放不需要处理的文件，如 favicon.ico、robots.txt 等。
• 绝对路径访问： 可以直接通过 / 开头的路径访问这些文件，无需担心路径转换问题。

2、示例

想象一下，你的项目需要一个网站的图标。你可以将 favicon.ico 文件放在 public 文件夹中，然后在 index.html 中这样引用它：

<!-- 直接引用 public 目录下的图片 -->
<link rel="icon" href="/favicon.ico">

三、assets 文件夹：经过处理的资源，资源加工厂

---

与 public 文件夹不同，assets 文件夹用于存放那些需要经过 Vite 处理的资源文件。这包括样式表、JavaScript 文件、图片等。Vite 会对这些文件进行必要的编译、压缩和缓存优化，确保资源加载效率。在 Vue3 的单文件组件 (SFC) 中，可以使用 ES6 的 import 语法或动态绑定来引入 assets 文件夹中的资源：

1、作用

• 资源处理： 存放需要 Vite 处理的资源文件。
• 加载器支持： 可以使用 Vite 提供的加载器来处理这些文件。
• 构建优化： 在构建过程中，Vite 会自动处理这些文件，并将它们复制到输出目录。

2、示例

假设你有一个项目 logo，你想对其进行压缩和优化。你可以将 logo.png 文件放在 assets 文件夹中，然后在 Vue 组件中这样引用它：

<template>
  < img :src="require('@/assets/logo.png')" alt="Logo">
</template>

或者，你可以使用 ES 模块导入的方式：

<template>
  < img :src="logo" alt="Logo" />
</template>

<script setup>
import logo from '@/assets/logo.png';
</script>

四、图片资源的放置与使用

---

在 Vite + Vue3 项目中，图片资源可以放在 public 或 assets 文件夹中，具体取决于你是否需要对图片进行处理。

• public 文件夹： 适合存放不需要处理的静态资源（如：不需要处理的图片），可以直接通过绝对路径引用。
• assets 文件夹： 适合存放需要优化和处理的静态资源（如：需要处理的图片），可以通过模块导入的方式引用。

五、结语

---

通过本文的介绍，相信你对 Vite + Vue3 项目中 public 和 assets 文件夹的作用以及图片资源的存放和使用方法有了更深入的理解。合理利用这些文件夹，可以有效提升资源加载效率，优化用户体验，为构建高性能的前端项目打下坚实的基础。

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/141188409