参考:https://www.jb51.net/article/163170.htm
![7cb1545172305b4ff36230041c645037.png](https://i-blog.csdnimg.cn/blog_migrate/8c9c648598323ce1d7c4047cb3723f0f.jpeg)
vue中静态资源的引入机制
静态资源可以通过两种方式进行处理:
在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。
如 src="..."> 、 background: url(...) 和 CSS @import 的资源
例如, url(./image.png) 会被翻译为 require('./image.png')
放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理,你需要通过绝对路径来引用它们。如果 URL 是一个绝对路径,例如 /images/foo.png ,它将会被保留不变。
假设有这样一个目录:
vue-path/----- public/-------- images/------------ XX.jpg----- src/-