Vue中assets和static文件夹的区别

最近遇到了这样一个问题：
将同一张图片分别放入assets文件夹和static文件夹中，通过src属性直接写入路径或通过动态绑定传入路径，结果是不太一样的。在动态绑定中，assets文件夹中的图片加载不出来，我们来看下面的例子：

  <img src="../assets/Benz.jpg" alt="加载失败No.1">
  <img src="../../static/Benz.jpg" alt="加载失败No.2"><br>
  <img :src="cars[0].img" alt="加载失败No.3">
  <img :src="cars[1].img" alt="加载失败No.4"><br>
  <img :src="cars[2].img" alt="加载失败No.5">
  <img :src="cars[3].img" alt="加载失败No.6">

cars: [
        {
          img: "../assets/Benz.jpg",
        },
        {
          img: "../../static/Benz.jpg",
        },
        {
          img: require("../assets/Benz.jpg"),
        },
        {
          img: require("../../static/Benz.jpg"),
        },
      ],

结果如下：

我们发现，第三张图片加载失败了。为什么会导致这样的结果呢？

1、static中的文件，是不会经过编译的，打包后会生成dist文件夹，static中的文件只是复制一遍。因此，static中建议放一些外部的第三方文件，而自己的文件放在assets。

2、assets中的文件会经过webpack打包，重新编译，因为webpack使用的是 commenJS 规范，所以才必须使用require。

注意：只有使用cli2快速构建的项目才有static文件夹