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 中,直接上传,提高打包效率