assets和static的区别
文章类型:Vue
发布者:admin
发布时间:2023-04-11
一:相同点
1:都是用于存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下
2:资源在html中使用,都是可以的
3:资源通过import引入或者相对路径
<img src="../../../assets/images/002.jpg">
import assetsUrlImport from '../../../assets/images/002.jpg'
<img :src="assetsUrlImport">
二:不同点
1:assets:存放的静态资源文件在项目打包时,运行 npm run build 时会将 assets 中放置的静态资源文件进行打包上传,压缩体积,代码格式化。都会放置在 static 文件中跟着 index.html 一同上传至服务器
动态绑定中,assets的图片会加载失败,需要用require引入图片
assetsUrlRequire: require('../../../assets/images/002.jpg'),
2:static:放置的静态资源文件不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。在服务器中就会占据更大的空间
三:建议
1:将项目中 template需要的样式文件js文件等都可以放置在 assets 中,打包,减少体积
2:引入的第三方的资源文件如iconfoont.css 等文件可以放置在 static 中,直接上传,提高打包效率