vue项目打包后css背景图片无法显示问题
博主在测试打包项目时发现自己使用的404页面的背景图片无法显示,经过之前的问题,基本推断又是路径问题。在搜索引擎一番查找后发现果然是路径的问题,因为打包后的css文件在static文件夹下的css文件夹中,static文件夹和index.html是同级关系,这样引用时的路径就不对了,下面上解决办法:在build/utils.js文件中相应位置修改如下:// Extract CSS when t..
·
博主在测试打包项目时发现自己使用的404页面的背景图片无法显示,经过之前的问题,基本推断又是路径问题。在搜索引擎一番查找后发现果然是路径的问题,因为打包后的css文件在static文件夹下的css文件夹中,static文件夹和index.html是同级关系
,这样引用时的路径就不对了,下面上解决办法:
在build/utils.js
文件中相应位置修改如下:
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' //添加了这行代码
})
} else {
return ['vue-style-loader'].concat(loaders)
}
这样就在打包时在css对应引用路径前加入了../../
,这样路径就是从当前路径的父级目录的父级目录
开始,就可以成功找到css文件资源了。
这里还有一个问题需要注意,在代码中尽量使用相对路径引用
,不然即使照上面的方法改过之后路径也是不对的,如我的代码中引用一样:
.not-found {
height: 100%;
width: 100%;
background: url("../../../static/gif/404.gif");
background-size: 100% 100%;
}
这样css的图片引用路径就没有问题,可以正常显示了。
更多推荐
已为社区贡献6条内容
所有评论(0)