vue中public与assets的区别

一.public和assets文件的异同

image.png

1.相同点
文件夹中的资源在html中使用都是可以的。
2.不同点

• 使用assets下面的资源，在js中使用的话，路径要经过webpack中的file-loader编译，路径不能直接写。
• 使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。

注：
1.public中的文件，是不会经过编译的，打包后会生成dist文件夹，public中的文件只是复制一遍。因此，public建议放一些外部第三方，自己的文件放在assets，别人的放public中。
2.若把图片放在assets和public中，html页面都可以使用，但是在动态绑定中，assets路径的图片会加载失败（因为webpack使用的是commenJS规范，必须使用require才可以。

二.public和assets文件的使用

1.何时使用public文件夹

image.png

参考资料
1.https://www.jianshu.com/p/8341edbc7436
2.https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9