vue 项目引用static目录资源_Vue2.0项目入门 — 静态资源目录src/assets和static/区别...

rose.png

你应该注意到了，在项目结构上我们有静态资源两个目录：src/assets和static/。他们之间有什么区别？

通过webpack处理的资源

首先我们需要了解webpack如何处理静态资源。在*.vue组件中，所有的html模板和css都会被vue-html-loader和css-loader压缩并且查找资源路径。例如，(../logo.png)和background:url(../logo.png)，'../logo.png'是一个相对路径的资源文件，会被webpack处理成一个模块依赖。

因为logo.png不是javascript，当要视为一个模块依赖时，我们需要使用url-loader和file-loader来处理。这个模板已经给你配置了这些loader，所以你可以轻易得到如指纹文件和Base64内联的功能，同时能够使用相对路径，从而不必担心部署。

因为这些资源可能会在构建过程中被内联/复制/重命名，它们本质上还是你的一部分源代码。这就是为什么建议要将通过webpack处理的静态资源放置到/src目录、与其余的代码放在相同的地方。实际上，你甚至都不必将它们放置到/src/assets文件夹中：你可以把他们放到具体的模块/组件 目录中来使用。咧如，你可以将每一个组件放到它们自己的目录中，靠着它们的静态资源。

资源处理规则

相对路径url列如.lassets/logo.png会注入到一个模块依赖中。他们会基于你的webpack输出配置，自动替换生成的url。无前缀的url，列如assets/logo.png会被视为相同的相对路径Url，被编译进./assets/logo.png。 带