请选择 进入手机版 | 继续访问电脑版

NodejQ

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 980|回复: 1

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

[复制链接]
发表于 2018-5-15 21:57:26 | 显示全部楼层 |阅读模式
vue-cli 打包后CSS background不显示,图片路径错误问题

vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示。
先看项目的的结构:
QQ截图20180515214841.png

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

dev 模式 效果图
QQ截图20180515215954.png

build 模式 效果图
QQ截图20180515220402.png

背景图路径错误,当前显示
  1. http://localhost/dev.vue/dist/static/css/static/img/dev.d56428b.jpg
复制代码
应该显示
  1. http://localhost/dev.vue/dist/static/img/dev.d56428b.jpg
复制代码
多了2级目录
QQ截图20180515220649.png

解决方法
1.打开 /build/utils.js 文件
2.修改成为如下所示内容:
1279Z6_Z@U0[489RCNXUM1R.png

添加红框内容即可
  1. publicPath: '../../'//新增的
复制代码
成功后效果图

QQ截图20180515221236.png




点击放大,扫码打赏,金额随意!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|小黑屋|NodejQ ( 粤ICP备18055488号 )

GMT+8, 2020-1-27 11:50 , Processed in 0.042223 second(s), 12 queries , Redis On.

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表