Vite + Vue3: 深入理解public和assets文件夹的作用与使用
Vite + Vue3: 深入理解public和assets文件夹的作用与使用
在现代前端开发中，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组件中这样引用它：
<script setup>
import logo from '@/assets/logo.png';
</script>
<template>
<img :src="logo" alt="Logo" />
</template>
也可以这样写：
<template>
<img :src="'/src/assets/logo.png'" alt="Logo" />
</template>
值得指出的是，src前面必须要加:，并且还需注意里面字符串的表达，否则无法正常加载图片资源，以下是错误演示：
<template>
<img src="/src/assets/logo.png" alt="Logo" />
</template>
图片资源的放置与使用
在Vite + Vue3项目中，图片资源可以放在public或assets文件夹中，具体取决于你是否需要对图片进行处理。
- public 文件夹：适合存放不需要处理的静态资源（如：不需要处理的图片），可以直接通过绝对路径引用。
- assets 文件夹：适合存放需要优化和处理的静态资源（如：需要处理的图片），可以通过模块导入的方式引用。
结语
通过本文的介绍，相信你对Vite + Vue3项目中public和assets文件夹的作用以及图片资源的存放和使用方法有了更深入的理解。合理利用这些文件夹，可以有效提升资源加载效率，优化用户体验，为构建高性能的前端项目打下坚实的基础。