前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决 VUE: 本地运行和服务器上运行样式不一致,run、build 运行时样式有出入

解决 VUE: 本地运行和服务器上运行样式不一致,run、build 运行时样式有出入

作者头像
微风-- 轻许--
发布2022-04-13 16:28:15
2.2K0
发布2022-04-13 16:28:15
举报
文章被收录于专栏:java 微风java 微风

1. 我的情况:

我遇到 2 种情况,一个是表格的分页样式有变化。另一个是导航菜单样式有变化。

2. 解决:

方法一:

对于第1个问题我只是单纯在那个组件样式文化中加了 scoped 。

对于我的第2 个问题,用第一种方法不成功。

方法二:

于是,F12看到原本的样式上都有一条黑色的线,如下:

查后得知,这是样式被覆盖了。再找不带黑线的同名的样式就知道是哪个样式覆盖了原本的。

原来 是红框中覆盖了我原本的样式,找到红框中的样式设置文件并修改后,果然再运行就正常了。

另:我在网上看到有的是引入样式文件的顺序,影响加载顺序;多个相同样式文件同时存在项目中,要删除多余的;

还有其它原因参见:Vue 项目本地运行 run 与服务器上 build 样式不一致,build 后样式不生效

2019.5.30 后记

今天又遇到打包后样式有变的情况。

在页面样式不一致的地方,右键 “ 检查 ” 可查看当前问题界面是用的什么样式,如查看样式不对的div 的样式。

找到问题样式后,对比正确情况样式,研究 2 者有什么不一样。

找到区别后去更正错误样式为正确样式。

今天的情况是:App.vue 文件中有一个样式设置覆盖了我需要的样式。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-01-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档