vue-cli 打包后CSS background不显示,图片路径错误问题

2017-04-15阅读(21055)评论(0)牵着狗狗看MM

苏州实时公交查询

这个问题很多同学都会碰到,问题原因点我
下面给出解决方案

先看项目的的结构:
vue-struct

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

<style scoped>
    .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;
    }
</style>

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

[plain]assetsPublicPath: ‘/’,
[/plain]

然后打包文件
运行:npm run build就可以拉

赞(0)
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » vue-cli 打包后CSS background不显示,图片路径错误问题
分享到: 更多 (0)