vue打包踩坑 --- 背景图片路径问题

第一次用vue脚手架写项目,有点不知所措,页面写的很乱,背景图片的路径也是用的相对路径,如
background-image: url(../../assets/img/personindex-img.jpg);

这样写本身就会很麻烦,所以写路径时要写成  

background-image: url([email protected]/assets/img/personindex-img.jpg);

在npm run build 打包之前一定要改配置,改config下面的index.js里面的配置

vue打包踩坑 --- 背景图片路径问题

一共有两个assetsPublicPath,第二个assetsPublicPath要改成‘./’  

然后npm run build 打包,如果打包还是出现问题,背景图片还是出不来,还需要改一下build路径下的utils.js文件加上

publicPath:'../../',

完整的如下

vue打包踩坑 --- 背景图片路径问题


然后打包即可。就可以成功打包了。