@vue/cli3项目下，图片等静态文件引入问题

本文为作者原创，转载使用请附上原文链接
在使用@vue/cli3构建项目下，图片等静态资源引入问题往往遇坑，下面就对这些问题进行梳理并解决。

官方文档下介绍是这样的

静态资源可以通过两种方式进行处理：
1.在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
2.放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

也就是说，静态文件的存放目录有两种，assets和public文件夹。而这两个文件夹中的资源在项目打包运行之后的状态却又是不同的。

以图片为例

1. assets中的资源会经过webpack处理，在文件名上加上八位哈希值并存放在打包后根目录下的img目录下。
2. public中的资源不会经过webpack的处理，而是直接放在打包后项目根目录下

在这两种情况下，项目开发中对静态资源的引用方式也是不同的。

也以图片为例，假设有张图片为 1.png

• 在图片存放在assets中情况下，因为该目录下文件在项目打包后会在文件名中加加上八位哈希值，所以在img标签使用属性绑定对src进行赋值情况下（直接标签属性引入可以无视），不能直接使用字符串做为src路径，这回导致项目打包运行过程中在该路径下找不到该文件。应使用require方法引入
• 在图片存放在public目录下时，因为该目录下静态文件是直接拷贝存放在根目录中的并不会修改其文件名，所以可以使用字符串作为其文件引入路径。