VUE 爬坑之旅 -- 引入静态资源的正确方式

在 Vue 项目中，静态资源文件有二个位置可以存放，分别为 src 里面的 assets 文件夹和外层的 static 文件夹，从文件夹名字上面就可以大概的看出有何区别。

assets ：资产，资源
static ：静态的
同样都是放资源的位置，为什么会有二个地方，他们之间有什么区别呢？
在我原来的项目里面，我都是把各种资源文件放到 assets 里面，这样在打包的时候 webpack 会自动把资源给你压缩，比如把 png 图片压缩成 base64 格式，当时觉得这样好啊，自动压缩资源，减小项目体积，好东西。

然而在今天，我的这个做法被人实力打脸了，，，
最近入职了新公司，这二天在查看新公司项目代码，发现他们的各种资源文件都是放在 static 下面的，我就去问了，为什么不把资源放在 assets 里面，人家告诉我的理由如下：

将资源放到 static 里面是为了缓存的需要，放在 static 里面的文件，浏览器会自动为其设置缓存逻辑，在初次请求获取到资源以后，后续再请求相同的资源就会按照浏览器的默认缓存策略来处理，比如说如果资源没有更新，那么就会返回 304，浏览器会直接从缓存里面拿这个资源，减少了请求，这也算是项目的一个优化点。
如果是把资源放到 assets 里面，虽然会被压缩，但是每次请求的时候都会直接向服务器获取新的资源文件，这其实是一个很大的资源浪费，所以在打包体积和重复请求数的权衡上面，我们选择了后者。

通过这件事，我学到了不少，所以记录下来。
另外，关于缓存相关的知识，可以看下面这篇文章 ，讲的非常清楚https://zhuanlan.zhihu.com/p/44789005

这里需要纠正下，看了上面的那篇文章之后，我对前端缓存有了新的理解，所以上面用删除线划掉的那段话是有问题的，正确的应该是：
我们项目中放在 assets 中的图片文件在打包的时候会被压缩成 base64 格式的文件，这个文件在请求过之后会被放到 memory cache 中，当后面再次请求这个资源的时候就会从内存中直接读取，不会再发出请求，这个可以从浏览器的调试模式中看到，所以官方给出的图片资源的存放位置并没有问题，将项目中用到的小图标等文件放到 assets 下，不仅会帮我们压缩文件，还可以减少请求数，这正是我们所需要的。
vue-cli项目 build后请求本地static文件中的 json数据，路径不对，报错404处理方法

解决访问static目录下文件找不到的问题（ 报404 ？）