1、问题
用vue-cli构建的项目,在build打包上线后,背景图片路径解析出错,导致上线后的项目背景图片无法显示。
2、原因
在vue-cli构建项目后,有两种运行方法:
npm run dev: 开发环境,资源使用绝对路径,可以看到正常的背景图片;
npm run build: 打包项目,相对路径,上线后路径解析错误。
注意:通过img标签引入的图片是正常的,因为img标签是html标签,路径是从index.html可是访问,可以根据这一特点解决背景图片的问题。
3、解决方法
(1)、将背景图片通过行内样式引入
在data中定义一个style:
data () {
return {
style: {
background: 'url("../../static/bg.png") center',
backgroundSize: '1920px 100%'
}
}
}
然后通过行内样式引入
<div :style='style' ></div>
这样就可以解决问题了
(2)、修改配置(未验证)
打开build/utils.js,在文件相应位置加入红框里的内容,其中的值根据自己的实际情况配置。