博主在测试打包项目时发现自己使用的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的图片引用路径就没有问题,可以正常显示了。

Logo

前往低代码交流专区

更多推荐