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

最新推荐文章于 2024-08-28 21:02:29 发布
最新推荐文章于 2024-08-28 21:02:29 发布
阅读量5.6k 收藏 10
点赞数 6
分类专栏： 笔记 文章标签： vue vscode javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/harden3/article/details/123680352
版权
本文介绍了如何调整main.js中的文件引入顺序，将Element-UI置于最前，接着是app和router，以优化前端应用的加载效率。同时提出了通过限制每个页面style的范围来避免样式冲突，提高页面性能。
摘要由CSDN通过智能技术生成

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

没有心气儿
关注
专栏目录
解决vue+elementui项目打包后样式变化问题
10-15
主要介绍了解决vue+elementui项目打包后样式变化问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue本地项目正常，部署到服务器样式文件错乱
jingduliangshui的博客
08-18 1230
vue本地项目正常，部署到服务器样式文件错乱。 1、代码不一致 2、在文件main.js中引入babel-polyfill，可以有效解决空白页、空白屏问题。
面试官：vue项目本地开发完成后部署到服务器后报404是什么原因呢？
最新发布
jiadsadfasfs的博客
08-28 1381
vue项目本地开发完成后部署到服务器后报404是什么原因呢
Vue项目本地运行和打包后样式不同怎么办
sfyjknvcx的博客
06-02 7455
大家好，我是南宫。今天来分享一个小问题的解决方法，问题可能不是很具体，可以说是介绍一个思路了。有的时候vue项目本地运行时样式正常，打包部署后样式异常，解决方法可以看看这篇文章。
vue打包部署时页面布局混乱
qq_50031016的博客
06-15 1187
vue打包部署时，本地页面是非常完美的，部署到tomcat上时，布局就混乱了 我用的是vue+bootstrapvue，在style后面加了scoped部分页面在tomcat上是正常的，但bootstrapvue组件我重新写样式的style不生效 解决办法是：main,js中的顺序问题 .css必须放在./App和./router前面 还有就是每个vue组件里的style要加scoped,这很关键，起到css不被组件之间重叠的作用。 import Vue from 'vue' import config f
Vue页面偶现样式错乱问题刷新就又好了解决思路
梓隽的博客
03-22 1万+
遇到这个挺有趣的问题，就花时间整理下解决思路，希望能帮助到别人 问题 前端框架vue，某页面在首次进入时样式错乱，刷新后就好了，并且是偶现的。 解决思路 第一步 首先**排查css是否是样式问题 **，比如宽度的百分比设置有问题（上述问题是这个原因的可能不大） 第二步 在排查完样式没问题之后，就从页面加载顺序开始排查，一般页面都是先加载<head>然后再加载dom页面<body>,CSS跟DOM是同步加载的，但是如果引用外部样式或者脚本的话就会使异步加载，而我们大部分页面CSS都.
vue工程打包上线样式错乱问题 - bug解决（4种）
热门推荐
草巾冒小子的博客
03-13 1万+
vue工程打包上线样式错乱问题 - bug总结 项目开发完成后，执行npm run build 进行打包，将打包完成的dist文件部署在服务器。配置好域名解析，就可以实现工程上线。上线后，我们有时候会发现，它怎么和本地调试时长得不一样？ 长得不一样是样式问题，是打包的时候顺序先后问题，有一些样式没有生效，有一些样式被覆盖了。这时候可以考虑以下几种方法。 1.main.js样式引入顺序问题 ...
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
在Vue项目开发中，使用Vue CLI构建应用后，通常会通过`npm run build`命令生成一个用于部署的dist目录。然而，在将这个dist目录部署到Nginx服务器时，可能会遇到CSS样式不生效的问题。这个问题通常与静态资源的路径...
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
11-19
在使用Vue CLI和Webpack构建的项目中，遇到字体文件（如`.ttf`或`.woff`）在打包部署到服务器后无法找到的问题，这通常是因为文件路径配置不正确导致的。以下是一些关键知识点和解决方案： 1. **Webpack配置**： ...
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用...
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.... 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容： ... module.exports = { baseUrl: isProd ? '/baseXXX/' : '/', .... } 这里需要注意的是 dev 环境下不需
详解Vue+elementUI build打包部署后字体图标丢失问题
11-20
Vue+elementUI build打包部署后字体图标丢失，控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现： 控制台报错截图 dom渲染展示 解决方法： webpack module配置：(build目录下webpack.base...
vue打包时页面布局出现混乱
m0_54630400的博客
05-09 4583
vue在未打包之前，本地页面是完美的，但是打包成app时，出现了用户代理样式表，这种的样式不能修改，我就考虑到是用户代理样式表将自己的样式覆盖掉了，还有一个原因是继上一篇文章的错误：，我感觉没有解决根本问题，确实是文件引入的问题，在这里才得以解决。 解决方法： 每个vue组件里的style都要加scoped，main.js中的.css必须放在./App和./router前面，防止css被组件之间重叠 除了上述情况，我的是由于在public文件下的index.html中引入了重置样式表，这会导致用户代
vue部署样式加载不到
曾大强博客
07-09 699
把vue部署到服务器发现页面空白，在控制台发现资源的请求地址是根路径，所以证明配置有问题,由于这个项目是用vue ui打包的所以要在vue ui的配置中修改资源地址
vue项目打包之后样式错乱问题，如何处理
weixin_30394633的博客
07-05 2492
最近公司做的这个项目，要大量修改element里面的css样式，所以项目打包之后 会出现样式和本地开发的时候样式有很多不一样，原因可能是css加载顺序有问题，样式被覆改了。 所以在mian.js里面这样修改： ‘./APP’和'./router'放在element css的后面，router放到最后 还有就是每个vue组件里的style要加scoped,这很关键，起到css不被组件之...
关于用vue写的前端代码上传到服务器上页面错乱原因
qq_40209717的博客
12-30 734
关于用vue写的前端代码上传到服务器上页面错乱原因 <style scoped> </style> style中 去掉了scoped这个局部关键字，导致传到服务器上的界面错乱
vue页面跳转之后，之前页面的样式错乱，刷新之后又恢复正常。解决方法
changyana的博客
10-12 5352
这是css引用错乱导致的，也就是本页面被自动使用了其它页面的css样式。为了防止这种错乱产生，需要给每个页面加上scoped，表示此css样式只在本页面进行使用。
前端运行项目时，多个css样式打包错乱问题
wang9rui的博客
01-18 567
在优化代码时，优化webpack打包配置时，发现样式错乱 需求背景：有多个图片文件夹，不同的文件夹内图片名称相同，在不同的vue文件内引入不同的文件家里的相同的文件名字，发现样式错乱 原因：打包时没有加hash 解决方案：打包时增加contenthash ...
Vue项目部署到Nginx时CSS样式失效问题解决方案
"Vue.js应用在打包部署到Nginx时可能会遇到CSS样式不生效的问题。这通常是由于静态资源路径引用错误或者服务器配置不当引起的。本文将探讨如何解决这一问题。 首先，Vue.js项目通常使用Webpack进行打包，Webpack在...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值