解决vue +element 样式打包后错乱问题

最新推荐文章于 2024-02-27 17:26:11 发布
最新推荐文章于 2024-02-27 17:26:11 发布
阅读量1.4k 收藏 1
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/adai_zhu/article/details/117921194
版权
在使用Vue和ElementUI框架的项目中，打包后样式出现错乱。解决方法包括调整main.js中引入Element组件的顺序至最上方，以及检查并确保所有页面的style标签都添加了scoped属性，防止样式污染。经过排查，发现是两个页面忘记添加scoped导致的问题，修复后样式恢复正常。
摘要由CSDN通过智能技术生成

项目使用vue 框架 element组件 。打包正式环境后样式错乱了

解决方案

1、修改main.js 中引入element组件的顺序放在最上

2、查看项目中是否有页面 style 没有加scoped 如不加scoped 会导致样式污染。

我的项目中发现确实是因为有两个页面忘了加scoped 导致组件样式乱了

倾一池温柔
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
部署项目的问题（一）—— vue工程打包上线样式错乱问题
Stephy_Yy
12-05 1717
1、 打开index.html一片空白 参考：链接: link. 修改build对象里的assetsPublicPath为’./’ assetsPublicPath: './' 2、ElementUI样式丢失 参考：链接: link. 这里尝试完前三种： 1.main.js样式引入顺序问题 调整了import的顺序（可能是被第三方组件样式覆盖了，router放在最后引入，就可以实现组件样式在第三...
vue+element踩坑集锦
qq_40876719的博客
09-05 600
1、element表单验证使用： //baseinfo用于保存表单元素的值，baseRules保存验证规则 <el-form :model='baseInfo' :rules='baseRules'> //rule1是定义在baseRules下的一个验证规则 /**要注意的是prop、v-model和rules下的验证属性名字必须相同！！！ *从而验证规则一一对...
vue使用element-ui打包后与本地测试样式不同问题，改变element-ui原有样式方法
progrmmmm的博客
10-16 4391
1、产生原因为使用了HBuilder X工具开发,style未加scope. 除了HBuilder X以外其他集成环境几乎都会让新建的.vue文件的style为<style scope></style>,只有HBuilder X例外只是<style></style>。如果你用的是HBuilder X产生了这种问题，先给除了App.vue以外其他组件的<style>加上scope。 2、引入UI改变UI标签的样式时未使用穿刺 如果你使用了Ele
vue 使用elementUI 打包后样式错乱
hlvy
12-14 5238
1、 你的问题就是css权重问题 如果相同权重可能存在引入顺序问题 简单粗暴解决办法  如果是单页面 写入index.html里面  直接修改源码的css 很简单~~~ 加个！important 2、 你看下main.js中引入的顺序，是否和下面一样： import 'element-ui/lib/theme-chalk/index.css' import App from './...
elementUI项目打包后样式错乱问题解决
weixin_42630688的博客
09-29 3117
> npm run dev 时样式完全没有问题，run build之后打包上传服务器之后样式乱了，一脸懵逼~~ 1. 检查样式发现重置element的样式没有生效，但是检查main.js里面的样式引入顺序没有问题啊？？？ 2. 尝试将css引入放入app.vue中，打包后发现依然无效 ## 解决方案： - element 样式引入要在 router 及app之前，...
vue+ElementUi打包后样式失效的问题解决
weixin_46147856的博客
07-19 6257
vue+elementui项目打包后,我发现页面样式变成了elementui自带的样式,自己在组件里修改过的样式没有生效。 问题原因: main.js中的引入顺序决定了打包后css的顺序，如果先引入router,后引入第三方组件的话,第三方组件样式可能就会将组件内的样式覆盖。 解决办法: 调整引入顺序,先引入第三方组件，再引入router，就能实现组件样式在第三方样式之后渲染。 代码如下: main.js import Vue from 'vue' import App from './App' impor
vue打包后与本地测试样式不同问题,element-ui样式打包部署前后样式不同。
galaxyJING的博客
01-24 998
个别文件的样式中<style>未加scope。给<style>加上scope，就好了。
vue项目 build 打包后部分样式错乱问题
技小白的博客
08-03 8579
我在做一个页面加载loading 效果的时候，改了很多样式，有全局的有私有的,以至于到最后把自己都搞乱了不知道改过什么东西，最后在build打包上线后出现了部分样式显示错乱（主要是全局样式），影响到了整个页面，当时都懵了，怎么也找不到问题。墨迹到了晚上九点钟。在网上查了很多资料。最终解决，特意在这里记录一下，发现网上关于这种问题的回答挺少的所以我找了好久，希望我的回答可以贡献一点力量，让同样遇到这个问题的小伙伴不迷茫。 直接上代码： 其实只需简单两步就OK。 1， 在build 文件夹下 webpack.p
解决vue+elementui项目打包后样式变化问题
11-19
main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可以实现组件样式在第三方样式之后渲染。 代码如下： main....
解决Vue+Element ui开发中碰到的IE问题
10-18
本文主要探讨如何解决Vue+Element UI在IE中出现的常见问题，特别是样式错乱和v-loading功能无法正常加载的问题。 首先，IE9样式错乱的问题通常源于以下两个原因： 1. **Flex布局不支持**：Element UI在很多组件中...
Vue3+ElementPlus+TS
ianutt的博客
09-06 1330
Vue3
Vite创建的Vue3项目按需导入(自动导入) Element Plus 样式错误以及编译器报错的问题
最新发布
Aiden的笔记本
02-27 2324
在Vite构建的Vue3项目中，可以通过官方推荐的自动导入的方法，方便地使用Element Plus，这样不需要在每一个Vue中手动import，而且基于按需导入的自动导入打包时效率也会更高。但是，不当的使用可能会导致ElMessage，ElNotification 等组件的样式丢失，不经过很好的配置，可能会出现虽然正确使用，但编译器报错的问题。这篇文章主要讲解如何正确引入Element Plus，以及解决上述两个常见的问题。
vue项目打包后样式错乱
NanShanLJJ的博客
12-05 3124
问题 在开发的过程中，我们喜欢用里面写某个组件的独有样式。然而项目在打包之后运行在服务器中时，我们会发现scoped并没有生效。这时候有可能会出现样式错乱的情况。 问题产生的原因 vue的项目在打包后会把所有组建的样式代码压缩在同一个文件里，所以写在某个组件里的scoped就不会再区分这是哪一个组件的样式了。 解决方法 在创建每一个组件的时候都给根元素一个独立的类名，或者id。然后在写组件独有样式...
vite+ts+element-plus打包报错
weixin_45952652的博客
12-10 2551
在vite2.0里element-plus的ts在最后build的时候出现各种ts报错问题可以在tsconfig.json设置也可以在build里设置直接跳过检测直接检测自己的项目TS问题，也是github上提出的各种问题中找到的，只需要配置其中一个即可 tsconfig.json 配置 { "compilerOptions": { "skipLibCheck": true, // 针对element-puls的ts打包校验 } } OR package.json 配置 "scripts": {
VUE项目打包后样式变了
qq_38030465的博客
07-30 2272
一般是多个vue组件有相同的类名，导致样式相互影响 dev和bulid引用css文件的方式不同
Vue 中使用element-ui样式无效
xiang1907的博客
05-07 5100
1. Vue 中使用element-ui样式无效 示例按需加载组件，引用button 后发现样式无效，后经搜索发现没有引入样式，加上即可 2. 点击校验后报错 需要安装vue-notification npm install --savevue-notification 并在main.js中引用组件 import Notifications from "vue-notifi...
vite+ts+elementplus运行正常打包报错
m0_62317155的博客
05-28 6132
vue3+vite+ts+elementPlus中运行正常打包出错 能正常运行，但是打包出错 下面是问题描述，解决办法看目录解决办法那一项 组件代码在最后面 vue3+vite+ts+elementPlus的项目中，我遇到了npm run dev可以正常运行，然后运行npm run build的时候就报错的情况，编译不过去，在这里记录一下，而且在vscode中与element plus相关的是爆红的，但是可以正常运行，只是打包不能正常打包而已。就会报错 如在vscode中报这个红， 无法找到模块“ele
一个关于vue+element-ui打包样式污染的问题
weixin_48722827的博客
06-30 265
在本地运行的项目没有问题当打包发布时就会又样式问题，经过排查后发现原因时未在页面的styel标签加入scoped导致的样式污染，全部加上scoped后还是又一个样式被污染，但是找了很久没有找到污染源经过一系列的尝试找到了一个方法
vue+elementui开发的项目在本地运行成功，测试时会出现样式混乱
Fairyasd的博客
02-24 785
针对vue+elementui开发的项目在本地运行成功，但测试时会出现样式混乱或者错误的情况，一般操作为在vue的main.js中查看elementui的引入位置和router的引入位置， 解决方式：将elementUI引入放在router之前 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值