简述assets 和 static 的区别？

Vue面试题 5月前 0 148

assets 和 static 都是用来存放项目中的静态资源，如图片、样式文件、JavaScript 文件等的文件夹，但它们的处理方式不同。

assets：在 assets 文件夹中的资源会被 webpack 处理，支持模块依赖，例如：可以使用 ES6 import、require 引入资源，可以使用相对路径，支持路径提示，也支持诸如图片转 base64、调用 loader 等 webpack 功能。当构建项目时，webpack 会对 assets 中的文件进行合并、压缩等优化操作，并且在引用这些资源时，可以使用 Vue 的一些特性，例如路径解析、模块热替换等。

例如，在一个 Vue 组件中，你可能会这样使用 assets 中的图片：

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

static：static 文件夹中的资源不会被 webpack 处理，它们会直接被复制到最终的打包目录（默认是 dist）下。这意味着在 static 中的文件不支持模块依赖，也就不能使用 ES6 import、require 来引入资源，也不支持诸如图片转 base64、调用 loader 等 webpack 功能，只能通过绝对路径来引用它们。这个目录通常用来存放一些不需要进行处理或引用的静态资源。

例如，在 index.html 文件中，你可能会这样使用 static 中的图片：

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

总的来说，assets 和 static 的主要区别在于是否需要 webpack 对资源进行处理和优化。