publicPath:'../../',
if
(options.extract)
{
return
ExtractTextPlugin.extract({
use:
loaders,
publicPath:'../../',
fallback:
'vue-style-loader'
})
}
else
{
return
['vue-style-loader'].concat(loaders)
}
以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:解决vue打包之后静态资源图片失效的问题解决vue打包css文件中背景图片的路径问题详谈vue+webpack解决css引用图片打包后找不到资源文件的问题vue
cli使用绝对路径引用图片问题的解决关于Vue背景图打包之后访问路径错误问题的解决
1、可以同时使用背景色和背景图，具体方法首先用hbuilder新建一个html文件，创建一个div，并给div一个class属性，在上方的style中设置class的样式，这里把div的宽度和高度设置大点，方便观察效果：
2、然后使用background设置属性；background是一个复合属性，有五个参数，第一个是背景颜色，第二个是图片，第三个是图片重复的设置，第四个是背景图像是否固定或者随着页面的其余部分滚动，第五个个背景图像的起始位置：
3、最后打开浏览器，就能看到图片了，图片覆盖不了的部分则是使用背景色填充：
有的丢失,那是因为vue会把图片转成base64,但是图片大小超过阈值就不转了,直接引,而背景图片里用的是相对路径最后会直接替换成static,但是明显..至于为什么背景图有的打包后存在，有的丢失，那是因为vue会把图片转成base64,但是图片大小超过阈值就不转了，直接引，而背景图片里用的是相对路径最后会直接替换成static，但是明显路径会有问题，所以得配置下。修改 需要在上面红框中添加下面语句：
// 背景图片丢失：写改css中的路径(添加)
publicPath: '../../'
然后重新npm run dev即可.
