简述assets 和 static 的区别 ?

assets 和 static 都是用来存放项目中的静态资源,如图片、样式文件、JavaScript 文件等的文件夹,但它们的处理方式不同。

assets:在 assets 文件夹中的资源会被 webpack 处理,支持模块依赖,例如:可以使用 ES6 import、require 引入资源,可以使用相对路径,支持路径提示,也支持诸如图片转 base64、调用 loader 等 webpack 功能。当构建项目时,webpack 会对 assets 中的文件进行合并、压缩等优化操作,并且在引用这些资源时,可以使用 Vue 的一些特性,例如路径解析、模块热替换等。例如,在一个 Vue 组件中,你可能会这样使用 assets 中的图片:

<template>
  <img :src="require('@/assets/logo.png')" alt="logo">
</template>

staticstatic 文件夹中的资源不会被 webpack 处理,它们会直接被复制到最终的打包目录(默认是 dist)下。这意味着在 static 中的文件不支持模块依赖,也就不能使用 ES6 import、require 来引入资源,也不支持诸如图片转 base64、调用 loader 等 webpack 功能,只能通过绝对路径来引用它们。这个目录通常用来存放一些不需要进行处理或引用的静态资源

例如,在 index.html 文件中,你可能会这样使用 static 中的图片:

<img src="/static/img/logo.png" alt="logo">

总的来说,assets 和 static 的主要区别在于是否需要 webpack 对资源进行处理和优化。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值