vue 打包css路径不对_vue-cli 打包后CSS background不显示，图片路径错误问题

这个问题很多同学都会碰到，问题原因点我

下面给出解决方案

先看项目的的结构：

在Solution.vue组件中，CSS里定义了background，图片路径使用相对路径，Solution.vue相对于img的路径为../assets

[css]

.banner {

width: 100%;

height: 600px;

padding: 140px 20px;

-webkit-box-sizing: border-box;

box-sizing: border-box;

background: url(../assets/img/banner-solution.png) center center no-repeat;

color: #fff;

}

[/css]

config.js中“bulid”也就是生产环境中assetsPublicPath的设置如下

[plain]assetsPublicPath: ‘/’,

[/plain]

然后打包文件

运行：npm run build就可以拉