详解Vue-cli中的静态资源管理（src/assets和static/的区别）

Vue-cli中的静态资源管理是一项非常重要的功能，包含两个目录：src/assets和static/。在实际开发中，了解这两个目录的区别对于我们合理使用静态资源、提高开发效率非常有帮助。

一、src/assets

src/assets 目录用于存放应用程序中需要在代码中 import 的静态资源文件，如 .css、 .scss、 .js、 图片、字体、svgs 等等。这些资源最终会被 webpack 处理，webpack 会这些静态资源文件打包成不同的文件。比如.scss文件，会被打包生成.vue的style标签。

示例1：

比如我们有个logo.png图片，在代码中需要使用，可以在src/assets目录中新建一个名为logo.png的文件，然后在代码中引用：

<template>
  <div>
    <img src="@/assets/logo.png" alt="logo">
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style scoped>
img {
  width: 100px;
  height: 100px;
}
</style>

在代码中使用 @/assets/logo.png 即可。

二、static/

static/ 目录用于存放静态资源，这些静态资源不会经过 webpack 编译处理，打包时直接被复制到输出目录（dist/）中。这意味着，无论你是否使用这些资源，它们都会被打包输出。

示例2：

比如我们有一个 .pdf 文件叫做 agreement.pdf，这个文件需要提供给用户上传。在代码中不需要引用这个文件，只是需要将文件放在输出目录中。我们把这个文件放在 static/ 目录下面。

<template>
  <div>
    <p>请上传协议文件：XXXXXXXXXX</p>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style scoped>

</style>

在上传时直接调用 static 目录下的 agreement.pdf 文件即可。

总的来看，src/assets 和 static/ 两个目录各有用武之地，通过灵活使用这两个目录，可以有效提高开发效率。

如果有继续的问题，欢迎提出。