本文主要介绍vue cli webpack(vue静态资源)，下面一起看看vue cli webpack(vue静态资源)相关资讯。
处理静态资源
你可能会注意到，在结合vue-cli和webpack的项目中，我们通常会有两条路径指向静态资源:src/assets和static/。两者有什么区别？
打包资源
为了回答这个问题，我们必须首先了解webpack是如何处理静态资源的。在*。vue组件，所有模板和css模块都由vue-html-loader和css-loader解析找到路径url。
例如，img src 。/lo . png 和后台background:网址(。/lo.png)， 。/lo . png 是相对路径，将由webpack作为依赖项加载。
但是因为lo.png不是javascript，如果把它看成一朵依赖的花，我们需要通过url-loader和file-loader来解析它。这个模板已经为你配置了相应的加载器，所以你通常不用 不必担心相对路径的部署。
即使这些资源可能在构建过程中被内联/复制/重命名，它们仍然是源代码的重要部分。这就是为什么我们建议将静态资源单独放在/src文件夹中，就像其他资源文件夹一样。
事实上，你不知道。;不必把它们都放在/src/assets中，你可以根据模块/组件来组织和使用它们。例如，您可以将任何组件放在它们自己的目录中，并将静态资源存储在该目录中。
资源引入规则
相对路径，如。/assets/lo.png被解析为模块依赖项。它们将被基于您的webpack输出配置自动生成的url所取代。
没有前缀的路径(如assets/lo.png)与相对路径相同，转义为。//assets/lo.png。
以~为前缀的路径。~被认为是模块请求，与require( ;一些模块/图像。;).根路径，例如/assets/log.png。
获取javascript中的资源路径
comput: { background{ return require( ;。/bgs/amp。;这个。id 。jpg )}这个资源路径也会被file-loader处理，然后返回到处理后的路径。而且webpack会一次性加载这个bgs目录下的所有图片。
真实的静态资源
相比之下，static/中的任何文件都不会被w更改。ebpack处理。它们将被直接复制到目标文件夹，并且需要绝对路径来引用这些文件。
以上是本文的全部内容。希望对大家有帮助 s学习，希望大家多多支持。
标签:
资源路径静态化它们。
了解更多vue cli webpack(vue静态资源)相关内容请关注本站点。