在 vue 项目开发过程中遇到两次, 本地运行正常, build 后在服务器上样式没有生效, 或者在本地的效果没有正常显示,
下面一一说明:
一多个相同样式文件同时存在项目中
现象: 修改组件时, 在项目中复制了一个组件重命名后进行修改, 在本地执行正常, 后打包上传, 无法展示正常效果
解决过程: 在本地试图修改总是不见效果, 在控制台查看样式仍是之前的样式, 把其中一处样式在所有相关组件中修改, 打包上传后样式生效, 这说明是旧的样式在打包时覆盖了新的样式将旧组件删除后解决上述问题
原因猜测: 因为相同组件包含不同样式时, 无法判断哪份样式时在后面渲染, 如果旧样式刚好打包后在后面渲染, 则会覆盖掉新写的样式在本地执行时, 因为样式没有打包, 访问页面时渲染的都是组件自身样式, 所以不会出现上述问题
二全局 (main.js) 引用样式
现象: 在全局引入了 Element UI 样式, 在 header 组件中修改部分样式, 在本地执行正常, 后打包上传, 无法展示正常效果
解决过程: 因为在项目中段发现该问题, 以为是后续的样式造成的影响(虽然我也认为可能性极小), 删除新写的组件, 没有效果运行一段时间之前的代码, 项目正常运行, 这迫使我回想中间这段时间对项目做了什么?, 除了新写了一些组件, 还将一些配置信息从 index.js 中转移到了 main.js 中, 测试发现果然是这里出现了问题配置中同时出现了 Element UI 样式文件引用, 还有 router 的引用, 将 yang 样式引用放在 router 引用后解决问题
原因猜测: 不正常的样式显示的还是组件原始的样式, 由此猜测 router 加载时会加载组件样式, 将样式文件在 router 后引用会将 router 加载时渲染的样式覆盖掉, 所以建议将 router 的引用放在最后面
以上原因猜测是个人分析, 大家有新见解请在下方留言
最后, 在每个组件的样式中记得添加 scoped
来源: https://www.2cto.com/kf/201803/727111.html