在Vue项目开发中，有时候我们要向页面中添加一些背景图片，可是当我们在样式中添加了背景图片，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，列如下面的CSS样式就会出现报错：

background:url("../../assets/image/laosiji.jpg");

在node中有一种解决这个问题的方式，如下：
（1）在template中我们先这样写上：

<div :style="bgImg">

（2）我们需要在data中定义：

<template>
  <div :style="bgImg">
      
  </div>
</template>

<script>
export default {
    data:function(){
        return {
            bgImg: {
                backgroundImage: "url(" + require("../../static/img/beijing.jpg")+")",
                backgroundRepeat: "no-repeat",
                backgroundSize: '100% auto'
            },
        }
    },
    
}
</script>

<style>

</style>

ok ,搞定！！！
可复制拿去用，图片路径自己改改，不客气~

图片不是全屏的话 试试下面这个方法,绑定class 然后进行style样式更改

<template>
  <div :style="bgImg" class="img1">
      
  </div>
</template>

style样式：

<style>
.img1{
      height: 100%;    
      width: 100%
  },
  
</style>

这样就完成啦！！！