现象:
1)内容多的页面,页面底部内容显示不全;
2)本地环境刷新两下变正常,测试环境怎么刷都还是显示不全;
分析:
下意识对比开发和测试环境表现差异的css, 发现本地刷新min-height, 会没有然后页面正常,后来找到min-height仅在登录页的style=less下,其他页面只要刷新就没了,因为每个模块只会加载自己模块下css。
解决:
1、导致页面显示不全问题(min-height属性):html, body都用了min-height=700px, 子模块使用的100%继承,子模块内容撑不开外层出现滚动条,因此去掉就好了;
2、本地和测试环境表现不一致,找到min-height是在登录模块html, body下,其他模块只要刷新就会没了
(公共样式一定要放在所有页面都引的文件或公共模块中),
测试为什么怎么刷都有呢,发现打包配置中dev和prod不一致,prod下有个extract对于css拆分使用了vue-style-loader,
因此可以得知,在处理less-loader, css-loader后进入的vue-style-loader, vue-style-loader将vue文件下的style=less scoped保留在style, 但style=less仍被提取到了app.css打包合并的css中去了,
因此将错误的min-height永久的用在了所有页面导致出问题并表现差异;
<style lang="less">
<style lang="less" scoped>
webpack,本地和测试环境差异:
-
本地打包没有合并less=css到app.css使用,每个模块都会加载自己的less和scoped放到style;
每个页面都有自己的style在组件模块加载后加载;
单页面加载过的页面模块style一直在那里;
点新的页面追加;
刷新当前页面,只会加载当前页面的style;
如果是body什么的全局放到了某个模块下,但是一刷新可能就丢了,因此body要放到每个页面都会加载的公共模块下面去; -
测试环境:
合并打包将每个页面的style lang=less,合并到了app.css中
style lang=less scoped则在每个页面自己的style下加载
差异原因:
测试环境打包拆出合并了每个页面的lang=less到app.css,但开发环境只在login模块下的less,只要跳到其他页面刷新后login下style就丢了;
vue-style-loader打包插件,在测试环境打包使用extract的vue-style-loader,过滤了vue下面的style的scoped继续留在style,其他lang=less继续拆出打到合并到app.css了;
ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
总结:
1)如果有公共样式应放在每个页面都能加到的css或模块里,放到某个页面下根本不行,只要到其他页面一刷新就无效了;
2)因此style=less scoped每个页面自己用就好了;
3)style=less则用于公共模块下的样式,测试环境打包可以合并到app.css中;
4)所以单个业务页面下不要同时用style=less和style=less scoped,即使用style=less也要加名字不加又可能造成样式冲突,测试环境且会合并到app.css不是公共的就显得很多余了;