vue部署样式错乱

 1 <style scoped>
 2 .el-menu-vertical-demo:not(.el-menu--collapse) {
 3   border: none;
 4 }
 5 .submenu {
 6   float: right;
 7 }
 8
 9 .buttonimg {
10   height: 60px;
11   background-color: transparent;
12   border: none;
13 }
14
15 .showimg {
16   width: 26px;
17   height: 26px;
18   position: absolute;
19   top: 17px;
20   left: 17px;
21 }
22
23 .showimg:active {
24   border: none;
25 }
26
27 /deep/ .el-header {
28   padding: 0px;
29 }
30 </style>
引用外部组件，并要修改外部组件在当前组件的css样式时，需要在style标签加上scoped，当 style标签有 scoped属性时，它的 CSS 只作用于当前组件中的元素。
vue部署到服务器如下图：

在本地运行时如下图：