vue项目中assets和static中文件的区别

问题

vue-cli脚手架新建的项目，都有static和assets文件夹（vue-cli3是public和assets），两个都是用于存放文件的，到底有什么区别呢？

参考

http://vuejs-templates.github.io/webpack/static.html

Assets

assets文件夹中实际存放的是需要装入我们源码的文件。
webpack是如何处理静态资产的？在.vue文件中，所有模版和css都会被 vue-html-loader 和 css-loader 解析，并查找资源URL。也就是说，对于webpack来说，import、require还有相对路径的引入，都会被webpack进行处理一遍，而assets文件夹中的文件，都必须采用相对路径的方式进行引用，所以assets文件夹中，都会被webpack进行处理。

例如，在 和 background: url(./logo.png) 中，”./logo.png” 是相对的资源路径，将由Webpack解析为模块依赖。因为 logo.png 不是 JavaScript，当被视为模块依赖时，需要使用 url-loader 和 file-loader处理它。vue-cli 的 webpack 脚手架已经配置了这些 loader，因此可以使用相对/模块路径。

由于这些资源可能在构建过程中被内联/复制/重命名，所以它们基本上是源代码的一部分。这就是为什么建议将Webpack 处理的静态资源放在 /src 目录中和其它源文件放一起的原因。事实上，甚至不必把它们全部放在 /src/assets：可以用模块/组件的组织方式来使用它们。例如，可以在每个放置组件的目录中存放静态资源。

Static

相比之下，static/ 目录下的文件并不会被 Webpack 处理：它们会直接被复制到最终目录（默认是dist/static）下；想要使用static下的文件，需要使用绝对路径进行引入，这种引入方式，webpack不会对其进行处理，而使用import，还是被webapck进行打包一遍

资源决定规则

结论

assets适合放经常变动的，并且是需要被打包的
static下适合放第三方内容，一般第三方的文件都是被打包处理过的