vue项目本地样式正常，部署服务器后出现样式错乱的问题

最新推荐文章于 2024-04-30 19:12:02 发布
最新推荐文章于 2024-04-30 19:12:02 发布
阅读量5.2k 收藏 10
点赞数 6
分类专栏： 笔记 文章标签： vue vscode javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Harden3/article/details/123680352
版权

1.在main.js里，把emelent-ui的引入放最前面，app和router放后面，router放最后。在这里插入图片描述
2.乱也可能是各个页面的css样式出现同名之类的冲突，所以把每个style设置成仅本页面使用
在这里插入图片描述

没有心气儿
关注
  • 6
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
解决vue+elementui项目打包后样式变化问题
10-15
主要介绍了解决vue+elementui项目打包后样式变化问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue工程打包上线样式错乱问题 - bug解决（4种）
热门推荐
草巾冒小子的博客
03-13 1万+
vue工程打包上线样式错乱问题 - bug总结 项目开发完成后，执行npm run build 进行打包，将打包完成的dist文件部署在服务器。配置好域名解析，就可以实现工程上线。上线后，我们有时候会发现，它怎么和本地调试时长得不一样？ 长得不一样是样式问题，是打包的时候顺序先后问题，有一些样式没有生效，有一些样式被覆盖了。这时候可以考虑以下几种方法。 1.main.js样式引入顺序问题 ...
vue本地项目正常，部署到服务器样式文件错乱
jingduliangshui的博客
08-18 1114
vue本地项目正常，部署到服务器样式文件错乱。 1、代码不一致 2、在文件main.js中引入babel-polyfill，可以有效解决空白页、空白屏问题。
vue打包后与本地测试样式不同问题,element-ui样式打包部署前后样式不同。
galaxyJING的博客
01-24 770
个别文件的样式中<style>未加scope。给<style>加上scope，就好了。
VUE项目打包后样式变了
qq_38030465的博客
07-30 2203
一般是多个vue组件有相同的类名，导致样式相互影响 dev和bulid引用css文件的方式不同
vue打包时页面布局出现混乱
m0_54630400的博客
05-09 4228
vue在未打包之前，本地页面是完美的，但是打包成app时，出现了用户代理样式表，这种的样式不能修改，我就考虑到是用户代理样式表将自己的样式覆盖掉了，还有一个原因是继上一篇文章的错误：，我感觉没有解决根本问题，确实是文件引入的问题，在这里才得以解决。 解决方法： 每个vue组件里的style都要加scoped，main.js中的.css必须放在./App和./router前面，防止css被组件之间重叠 除了上述情况，我的是由于在public文件下的index.html中引入了重置样式表，这会导致用户代
vue 项目发版之后，样式发生变化
逆风优雅的博客
01-18 1347
在本地项目中，样式是好好的，但是一发版，就发现样式发生了变化。 可以尝试这样解决，通过这样，结局了，样式变化的问题 通过上面的修改，我解决了 项目发版之后，页面存在的样式变化问题。 ...
vue+elementui项目打包后样式变化问题
weixin_30815469的博客
08-21 932
博主刚刚解决了index.html空白问题，刚打开项目页面又发现了样式出现了大问题，样式与开发版本有很大不同，有些样式没有生效。利用搜索引擎，找到了问题所在以及解决办法：main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可以实现组件样式在第三方样式之后渲染。代码如下： main...
前端运行项目时，多个css样式打包错乱问题
wang9rui的博客
01-18 509
在优化代码时，优化webpack打包配置时，发现样式错乱 需求背景：有多个图片文件夹，不同的文件夹内图片名称相同，在不同的vue文件内引入不同的文件家里的相同的文件名字，发现样式错乱 原因：打包时没有加hash 解决方案：打包时增加contenthash ...
Vue项目 缩放之后样式变乱
zyzyzyzyyy的博客
02-13 545
vue项目，缩放之后样式变乱
基于SpringBoot+vue的校园二手书交易平台的设计与实现（源码+部署说明+演示视频+源码介绍）.zip
03-10
这是一个基于SpringBoot和Vue的校园二手书交易平台的项目文件，包含了全部的源代码、部署说明、演示视频以及源码介绍。该项目旨在为在校学生提供一个方便、快捷的二手书交易环境，帮助他们在购买或出售二手书籍时节省时间和精力。 项目主要包含两个部分：后端服务器和前端用户界面。后端服务器使用SpringBoot框架构建，负责处理用户的请求、与数据库交互以及业务逻辑的处理。前端用户界面使用Vue框架构建，提供友好的用户界面，使用户能够方便地进行书籍的搜索、发布、购买等操作。 源码中包含了完整的后端代码，包括控制器、服务、存储库等各个层次的代码，以及配置文件、依赖文件等。同时，也包含了前端的Vue组件代码、路由配置、状态管理等代码，以及相关的CSS样式文件和图片资源。 部署说明详细地介绍了如何将这个项目部署到服务器上，包括环境的搭建、数据库的配置、服务的启动等步骤。 演示视频展示了这个平台的实际运行情况，包括书籍的搜索、发布、购买等操作，以及用户之间的交互等功能。 源码介绍则详细地解释了每一部分代码的功能和实现方式，帮助开发者更好地理解和学习这个项目。 总的来说，这个项目是一个功能完善、设计合理的校园二手书交易平台，无论是对于开发者还是使用者，都是一个非常好的学习和使用的资源。
基于SpringBoot+vue的课程作业管理系统（源码+部署说明+演示视频+源码介绍）.zip
03-10
这是一个基于SpringBoot和Vue的课程作业管理系统的源码资源包。它包含了完整的源代码，部署说明，演示视频以及源码介绍，可以帮助用户快速搭建和运行一个课程作业管理系统。 该课程作业管理系统是一个基于Web的应用程序，使用SpringBoot作为后端框架，Vue作为前端框架。它提供了丰富的功能，包括课程管理、作业管理、学生管理、教师管理等。用户可以通过系统轻松地创建和管理课程，分配和收集作业，查看和评估学生的完成情况，生成报告等。 源码中包含了完整的后端代码，包括实体类、控制器、服务层、数据访问层等。用户可以根据自己的需求进行修改和扩展，以满足特定的业务需求。同时，源码还包含了前端代码，包括页面组件、路由配置、样式文件等，用户可以根据自己的喜好进行定制化的界面设计和交互效果。 部署说明中详细介绍了如何将该系统部署到服务器上，并提供了相关的配置文件和数据库脚本。用户可以根据部署说明进行操作，轻松地将系统部署到自己的服务器上，并实现系统的正常运行。 演示视频展示了该系统的实际运行效果，用户可以观看视频了解系统的各项功能和操作流程。通过观看演示视频，用户可以更加直观地了解系统的界面设计和功能实现。 源码介绍对整个系统的架构和功能进行了详细的说明，包括系统的设计理念、技术选型、模块划分等。用户可以通过阅读源码介绍，对系统的设计和实现有一个全面的了解。 总之，这个基于SpringBoot和Vue的课程作业管理系统的源码资源包是一个非常实用的工具，可以帮助用户快速搭建和运行一个课程作业管理系统，提高教学和管理的效率。
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.... 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容： ... module.exports = { baseUrl: isProd ? '/baseXXX/' : '/', .... } 这里需要注意的是 dev 环境下不需
vue-playground:Vue 2训练场
04-14
:red_exclamation_mark: Vue游乐场 :writing_hand: 培训Vuex，Vux和其他Vue库的地方。 这个仓库是做什么用的？ 培训，教程，测试现场 ... 打开本地服务器 npm run build 创建优化的版本 npm run lint 整
VScode 无法连接云服务器
m0_70403090的博客
04-30 335
重启电脑，都无法成功。最后重置电脑后才连接上，但是重启服务器后又出现该问题。试了很多方法，比如更换VScode版本，卸载重装，删除配置文件。
vscode 、eslint、prettier 的孽缘
qq_42881675的博客
04-27 703
今天在配置一个新项目的时候，被一个新项目搞得头痛。我准备配置 prettier 来格式代码，然后把 prettier 添加到 eslint 规则中，这样控制台就能很好的展示那些代码格式有问题。可是控制台的错误和 vscode 显示的错误一直不一样，无论我怎么格式化代码，不是控制台报错，就是 vscode 显示代码标红。最后捋清楚了，原来是 vscode 的 eslint 插件，热更本地配置时没有完全加载成功。vscode 才能让代码视图和控制台一致。
VScode调用devcpp编译
Apricity_L的博客
04-27 303
打开环境变量，用户和系统都可以，只是给的权限不一样而已，个人pc一般不会设置多个用户。打开VScode，随便写一个代码，如果生成了，把.vscode文件夹删除。点击运行，会弹出这个，选择刚刚设置的配置，路径和你的dev位置有关系。新建一个，把你的dev的MinGW64\bin路径粘贴过去。然后重启电脑，VScode要重启电脑才能加载新的环境变量。然后就会调用你dev的环境生成了。编译器路径设置为这个。
vscode相关插件使用----持续更新中
最新发布
qq_41636999的博客
04-30 1096
以下是更多常用的VSCode插件推荐：
vue打包dist文件 部署到服务器上样式移位vu
05-26
在本地开发环境中，这通常不会出现问题，但是在部署到服务器上时，由于路径不同，可能会导致样式移位。 解决方案有两种： 1. 使用绝对路径：在 vue.config.js 中设置 publicPath 为绝对路径，例如： ```js module...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值