vue项目中的静态资源处理

如图所示，一个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,需要我们进行一些配置

二、将静态资源放在static时

在项目中引入资源时路径为

./static/...

     在JavaScript中，经常用到./和../及/路径访问指定的资源，但三者有什么区别：

      ./表示当前目录

     ../表示父级目录

    /表示根目录