面试题：Vue 项目中 assets 和 static 的区别是什么？

在 Vue 项目中，assets 和 static 是两个常用的目录，用于存放静态资源（如图片、字体、样式文件等）。它们的区别主要体现在资源处理方式和打包行为上。

---

1. assets 目录

特点：

• 路径处理：
  • assets 中的资源会被 Webpack 处理，路径会被解析为模块依赖。
  • 在模板或样式中引用资源时，需要使用相对路径或 @ 别名。
• 打包行为：
  • assets 中的资源会被 Webpack 打包，并生成带有哈希值的文件名（用于缓存控制）。
  • 资源会被压缩和优化（如图片压缩、CSS 压缩等）。
• 适用场景：
  • 适合存放项目中需要动态加载或处理的资源。
  • 例如：组件中使用的图片、样式文件、字体文件等。

示例：

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

---

2. static 目录

特点：

• 路径处理：
  • static 中的资源不会被 Webpack 处理，路径会被直接复制到输出目录。
  • 在模板或样式中引用资源时，需要使用绝对路径。
• 打包行为：
  • static 中的资源不会被 Webpack 打包，文件会原封不动地复制到输出目录。
  • 文件名不会添加哈希值，也不会被压缩或优化。
• 适用场景：
  • 适合存放不需要 Webpack 处理的静态资源。
  • 例如：第三方库、不需要缓存控制的文件、直接通过 URL 访问的文件等。

示例：

<template>
  <img src="/static/logo.png" alt="Logo" />
</template>

---

区别对比

特性	assets 目录	static 目录
路径处理	被 Webpack 处理，路径解析为模块依赖	不被 Webpack 处理，路径直接复制
打包行为	被打包，生成哈希值，压缩优化	不被打包，原封不动复制
引用方式	相对路径或 @ 别名	绝对路径
适用场景	需要动态加载或处理的资源	不需要 Webpack 处理的静态资源

---

使用场景示例

1. 使用 assets 目录

• 存放组件中使用的图片：

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

• 存放样式文件：

  import '@/assets/styles/main.css';

2. 使用 static 目录

• 存放第三方库：

  <script src="/static/js/library.js"></script>

• 存放不需要缓存控制的文件：

  <template>
    <img src="/static/logo.png" alt="Logo" />
  </template>

---

总结

• assets 目录：
  • 资源会被 Webpack 处理，适合存放需要动态加载或处理的资源。
  • 引用时使用相对路径或 @ 别名。
• static 目录：
  • 资源不会被 Webpack 处理，适合存放不需要打包的静态资源。
  • 引用时使用绝对路径。

根据资源的使用场景选择合适的目录，可以提高项目的开发效率和性能。