vue项目里背景图片打包上线后出错

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，在文件相应位置加入红框里的内容，其中的值根据自己的实际情况配置。