在webpack（css单独提取出来）打包后，背景图路径不对

来源：7-13 课程总结

Charless

2017-04-02

在webpack（css单独提取出来）打包后，背景图路径不对，怎么办呢？css里面background的url路径是按html页面计算的，但是提取出来后路径应该按照css文件所在目录计算啊，求指点。

写回答

2回答

fishenal

2017-04-02

已采纳

npm run build看看最终dist目录图片是放在哪的。

小图片一般都转成base64，,大的图片应该是有目录要求，其他的目录不会移到最终的项目里。

Charless

fishenal

实在抱歉，可能我表达得有问题。就是npm run dev一切正常，npm run build后的background-imag的图片不显示（相对路径不正确）。

2017-04-05

共3条回复

Charless

提问者

2017-04-02

谢谢回答，打包后图片在dist\static\img目录下，样式在dist\static\css目录下，样式背景图background的url路径为 static/img/xxx.jpg，打包后在浏览器硬改成../img/xxx.jpg才能显示出来。项目是直接vue init webpack初始化的，没有修改默认配置，如果注释掉配置build\utils.js里用extract-text-webpack-plugin的地方，背景图会显示正常，不过打包后样式会在js文件中，并在html加载时以style标签插入，而且有多少个组件就会写入多少个style标签。不知是vue-loader还是css打包插件还是需要另外的配置？

最容易上手的Vue2.0入门实战教程

快速入门Vue2.0，组件化开发一个数字产品电商平台

3966 学习 · 999 问题

查看课程

相似问题

打包上服务器后图片路径错误

回答 1

data里的对象写图片路径解析不了

回答 1

关于打包

回答 2

如果用webpack构建vue项目，项目上线的时候，需要把webpack脚手架全部都放到服务器上吗？

回答 1

找不到路径，用系统自带的cmd

回答 1

打开慕课网App查看更多内容