vue项目中的静态资源处理

本文介绍了Vue项目的静态资源处理,指出assets文件夹下的资源需通过webpack打包,而static文件夹中的资源则直接复制。当静态资源放在assets中打包后可能出现404错误,需要特定配置解决。在引用资源时,./表示当前目录,../表示父级目录,/表示根目录。
摘要由CSDN通过智能技术生成

如图所示,一个vue项目结构如下:

src下assets文件夹需要进过webpack打包,而static则不需要进行打包

一、将静态资源放到assets文件夹时

当我们把一些静态资源放到assets文件夹下时,我们需要用相对路径引入:

 <div>
    <img :src="require('@/assets/img/1.png')" alt>
    <img src="../assets/img/1.png" alt>
  </div>
.login_conainer {
  width: 1920px;
  height: 1080px;
  background: url(../../assets/img/1.png) no-repeat;
  background-size: cover;
}
<style scoped>
@import "./index.css";
</style>

这些都没有问题,但是当我们打包上限的时候,则会报这些静态资源404,需要我们进行一些配置

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值