vue项目使用 npm run build 打包后出现样式错乱问题解决方法

最新推荐文章于 2024-06-11 10:53:58 发布
最新推荐文章于 2024-06-11 10:53:58 发布
阅读量3.9k 收藏 2
点赞数 2
分类专栏： 前端 文章标签： vue 打包样式错乱问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45090000/article/details/103241913
版权

检查组件内的 标签是不是没有加scoped
不加scoped打包后容易引起样式错乱
正确规范应该这样
在这里插入图片描述
scoped 作用style样式只在本组件内有效，防止别组件类名 或标签一样样式冲突。

giao序员
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
今天小编就为大家分享一篇解决Vue-cli npm run build生产环境打包,本地不能打开的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue打包 npm run build-test突然不动了的问题
01-22
补充知识：vue_test_unit_e2e常见问题npm run unit单元测试和npm run e2e集成测试问题 vue项目要进行unit和e2e常见问题 localStorage is not available for opaque origins console.error node_modules
vite vue3项目打包如何跳过ts检查并进行打包
偏执的小男孩儿
01-17 2769
vite vue3项目打包如何跳过ts检查并进行打包
Vue使用npm run build 打包样式与本地不符
itgaojian1994的博客
02-27 2064
npm 打包文件超出限制
❤ npm运行打包报错归纳
最新发布
林太白
06-11 352
❤ npm 前端运行打包报错归纳。
Vue项目本地运行和打包后样式不同怎么办
sfyjknvcx的博客
06-02 7040
大家好，我是南宫。今天来分享一个小问题的解决方法，问题可能不是很具体，可以说是介绍一个思路了。有的时候vue项目本地运行时样式正常，打包部署后样式异常，解决方法可以看看这篇文章。
vue工程打包上线样式错乱问题 - bug解决（4种）
热门推荐
草巾冒小子的博客
03-13 1万+
vue工程打包上线样式错乱问题 - bug总结 项目开发完成后，执行npm run build 进行打包，将打包完成的dist文件部署在服务器。配置好域名解析，就可以实现工程上线。上线后，我们有时候会发现，它怎么和本地调试时长得不一样？ 长得不一样是样式问题，是打包的时候顺序先后问题，有一些样式没有生效，有一些样式被覆盖了。这时候可以考虑以下几种方法。 1.main.js样式引入顺序问题 ...
vue项目 build 打包后部分样式错乱问题
技小白的博客
08-03 8385
我在做一个页面加载loading 效果的时候，改了很多样式，有全局的有私有的,以至于到最后把自己都搞乱了不知道改过什么东西，最后在build打包上线后出现了部分样式显示错乱（主要是全局样式），影响到了整个页面，当时都懵了，怎么也找不到问题。墨迹到了晚上九点钟。在网上查了很多资料。最终解决，特意在这里记录一下，发现网上关于这种问题的回答挺少的所以我找了好久，希望我的回答可以贡献一点力量，让同样遇到这个问题的小伙伴不迷茫。 直接上代码： 其实只需简单两步就OK。 1， 在build 文件夹下 webpack.p
解决vue项目,npm run build后,报路径错的问题
10-14
总结，解决Vue项目`npm run build`后报路径错误的问题，主要涉及`webpack`配置中的`output.publicPath`、`config.index.js`中的`build.assetsPublicPath`以及正确处理CSS样式覆盖和资源引用。理解这些配置和技巧，能...
vue中Npm run build 根据环境传递参数方法来打包不同域名
12-12
使用 npm run build -- xxx ，根据传递参数xxx来判定不同的环境，给出不同的域名配置。 1.项目中/config/dev.env.js修改： 新增：HOST: ‘”dev”‘ 'use strict' const merge = require('webpack-merge') const ...
vue打包时页面布局出现混乱
m0_54630400的博客
05-09 4438
vue在未打包之前，本地页面是完美的，但是打包成app时，出现了用户代理样式表，这种的样式不能修改，我就考虑到是用户代理样式表将自己的样式覆盖掉了，还有一个原因是继上一篇文章的错误：，我感觉没有解决根本问题，确实是文件引入的问题，在这里才得以解决。 解决方法： 每个vue组件里的style都要加scoped，main.js中的.css必须放在./App和./router前面，防止css被组件之间重叠 除了上述情况，我的是由于在public文件下的index.html中引入了重置样式表，这会导致用户代
xgplayer西瓜视频插件引用后因视频格式引起问题？
为写出赏心悦目、容易维护的代码而探索
11-16 2439
vue3引用插件有问题？
vue+ElementUi打包后样式失效的问题解决
weixin_46147856的博客
07-19 6110
vue+elementui项目打包后,我发现页面样式变成了elementui自带的样式,自己在组件里修改过的样式没有生效。 问题原因: main.js中的引入顺序决定了打包后css的顺序，如果先引入router,后引入第三方组件的话,第三方组件样式可能就会将组件内的样式覆盖。 解决办法: 调整引入顺序,先引入第三方组件，再引入router，就能实现组件样式在第三方样式之后渲染。 代码如下: main.js import Vue from 'vue' import App from './App' impor
VUE项目打包后样式变了
qq_38030465的博客
07-30 2250
一般是多个vue组件有相同的类名，导致样式相互影响 dev和bulid引用css文件的方式不同
记一次npmrunbuild打包后中文文件名报错的解决，发现本地环境的问题
qq_35961368的博客
07-16 508
前面的博客说到【urlscan能解决安全检测漏洞】 地址【https://blog.csdn.net/qq_35961368/article/details/114821866】 其中安装了urlscan，并做了配置 后来发现urlscan引起其他网站出现问题，所以就卸载了 问题来了 这次又发布网站时中文png文件会报404，如下 标红处仍然有【UrlScan】字样 于是检查iis中的配置 检查路径【C:\WINDOWS\system32\inetsrv\urlscan\urlsc.
vue项目 npm run build后 在浏览器上打开index.html常见问题
H的博客
12-11 3078
1.打开报错 解决方法 config文件里的index.js里, assetsPublicPath:'/',改成 ./ 重新build即可 2.打开后使用的icon字体图标不显示 解决方法 build文件里的utils.js里添加publicPath:'../../' ，重新build即可 ...
vue项目打包部署后中文乱码
xiejunna的博客
03-25 5381
web项目 项目框架：springmvc + vue vue项目本地调试OK，npm run build后，放到springmvc项目的webinfo目录后，再次访问，出现中文乱码情况。 解决办法： npm run build 后，index.html添加如下内容 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> ...
npm run build打包后index.html打开是空白的，解决方法来了
m0_59226489的博客
07-05 1608
npm run build打包后index.html打开是空白的，解决方法来了
vue项目中npm run build后面如何配置参数
07-27
在Vue项目中，你可以通过修改`package.json`文件中的`scripts`部分来配置`npm run build`命令的参数。 1. 打开项目的根目录，找到`package.json`文件。 2. 在`scripts`对象中，找到`build`属性。该属性对应的值是一...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值