Vue-Cli 访问静态文件

• 版本：
  D:>vue -V
  @vue/cli 4.5.7

• 目录结构

  

  image.png

• 问题：
  无论如何设置，都无法访问/static的图片，百思不得其解！

-解决：
找了半天，发现根目录居然有一个/static的文件夹，事实上，vue的静态文件是放在/public/static里的，这个长在根目录下的/static是怎么来的？？？原因未知。这下就好办了，把图片挪到/public/static里，一切正常。

• 结论：

1. /public/static的资源，只能用绝对地址来访问：
   <img src="/static/logo.png" />
   <img :src="'/static/logo.png'" />
   注意第1行是HTML最传统的加载方法，就是显示一副固定图片。
   第2行是vue将src属性进行了双向绑定，此处的'/static/logo.png'，很明显它就是一个字符串，因此也可用一个变量来表达，便于动态加载图片。用这种方式webpack不会对其进行打包，static下的所有文件只是原封不动地进行Copy处理(但仍然是按需原则，那些完全没有使用到的资源并不会被拷贝)

2. /src/assets内的资源，可以用相对地址来访问：
   <img :src="require('../assets/logo.png')" />
   以这种形式加载，同样对src进行了双向绑定，可以支持动态加载，但webpack会将其打包，并修改其文件名。

3. 任意目录的资源，可以用相对地址来访问：
   <img src = "../../hello/logo.png" />
   假设有/hello这个目录，可以用相对地址进行访问(任意目录)，但是webpack会自动将它转化为base64图片字符串形式，并且这种方式只能访问固定资源，无法双向绑定，自然也无法使用变量来动态加载了。

4. 心得：当发现无法访问static的资源时，先看看static是不是在public下，免得走冤枉路!