你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:src/assets和static/,他们两者的区别是什么呢?这个模板已经为你配置了相应的loader,所以你通常不用担心相对路径的部署问题。即使这些资源有可能在构建过程中被内联/拷贝/重命名,他们也是源码重要组成部分。事实上,你都不必把他们全放在/src/assets,你可以根据模块/组件来组织利用他们。相对路径,比如 ./assets/logo.png会被解析成模块依赖。~被认为是一个模块请求,同require。根路径,比如/assets/log.png这个资源路径同样会被file-loader处理然后返回处理后的路径。而且Webpack会一次性加载该bgs目录下的所有图片。与此相对的,static/中的文件全都不会被Webpack处理。它们将被直接拷贝到目标文件夹,引用这些文件需要使用绝对路径。

详解vue-cli与webpack结合如何处理静态资源