vue 打包后背景图片无法显示

假如我们在vue中像这样在style中设置background，正常命令行运行vue项目，可以正常显示背景图片，但是一旦打包后，就无法正常访问了

.inp {
  background: url('../assets/from.png') 0 3px no-repeat;
}

查看控制台报错发现，这个url居然去请求后台了，那样是肯定找不到图片了

 

解决方法：

1、在data中定义如下：

export default {
 name: 'productdetailspage',
 data() {
  return {
   note: {
   backgroundImage: "url(" + require("../../assets/save.png") + ")",
   backgroundRepeat: "no-repeat",
   backgroundSize: "25px auto",
   marginTop: "5px",
   },
  }
 },

2、通过行内样式将样式引入

<div class="inp" :style ="note"></div>

完美解决