webpack中的使用background image時(shí)，為什么在圖片路徑前面加上~@才生效

在vue-cli生成的工程中，如果在vue中使用background image style的話。圖片的url路徑必須在前面加上~@，這樣在生成后，才能正確顯示，否則會(huì)提示找不到圖片文件。這是為什么？~應(yīng)該是src路徑的意思，@是什么意思呢？為什么加上~@就可以告訴load，將圖片拷貝到static中去呢？

export default {
  data () {
    return {
      img: Img,
    }
  }
}
</script>

<style>
  .img1{
    width: 100px;
    height: 100px;
    background: url('~@/assets/1.jpg') center center no-repeat;
    background-size: 100px auto;
  }
  .img2{
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat:  no-repeat;
    background-size: 100px auto;
  }
</style>