解决vue背景无法铺满全屏的问题

今天新建了个vue项目，想弄一个顶部铺满屏幕的图片，结果发现无论怎么调，都无法完全铺满屏幕。

image

排查思路如下：

1.检查视口viewport

检查index.html的头部是否正确设置了视口，使内容展示自适应屏幕的大小。

我的配置：

这里没有问题。

2.检查element-ui引入

我的配置

import ElementUIfrom 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI

这里我一度怀疑是element-ui的默认样式导致的问题，看了半天我引入的css文件，没能找到问题。

3. 找到问题-index.html自带样式

后来经过多方查找，原来是index.html的body自带样式，在该文件的头部写如下自定义样式。

问题解决：

image.png