vue工程打包上线样式错乱问题 - bug解决（4种）
vue工程打包上线样式错乱问题 - bug总结（4种）
项目开发完成后，执行
npm run build，进行打包，将打包完成的dist文件部署在服务器。配置好域名解析，就可以实现工程上线。
上线后，有时候我们会发现，它怎么和本地调试时长得不一样？
- 长得不一样是样式问题?
- 是打包的时候顺序先后问题?
- 有一些样式没有生效，有一些样式被覆盖了?
这时候可以考虑以下几种方法。
Method1：main.js样式引入顺序问题
有时候我们发现组件内的样式没有生效，可能是被第三方组件样式覆盖了，router放在最后引入，就可以实现组件样式在第三方样式之后渲染。
- 参考：vue工程打包上线样式错乱问题
解决办法：
- router放在最后引入。（具体参考上述文章）
Method2：webpack 打包编译-webkit-box-orient: vertical 后消失
从下面的代码中我们不难看出：因为webpack编译会发生css去重的问题，在打包的过程时会过滤掉重复的css类或样式代码，虽然有时候不重复的也会被过滤掉（:/偷笑）但它确实发生了。
- 参考： webpack 打包编译-webkit-box-orient: vertical 后消失
解决办法：
- 找出
/build/webpack.prod.conf.js文件的代码（如下），然后直接注释掉就可以了：// Compress extracted CSS. We are using this plugin so that possible// duplicated CSS from different components can be deduped.new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),
Method3：添加使用范围样式<style scoped>
解决办法：
- 找出
/build/webpack.prod.conf.js文件的代码（如下），然后直接注释掉就可以了：<style scoped><style scoped>是H5的新特性，它限制样式只适用于当前组件，避免组件间的样式干扰。
Method4：打包编译之后，找到样式文件，修改对应代码
- 还有一些是第三方组件的默认样式，在本地调试时没有显现出来，想要最直接地得到效果，就是在控制台里找到对应的类，
- 再手动在组件里修改成自己想要的值。
这种方式比较简单粗暴，只适合临时解决问题，不建议经常使用此种方法。
以上就是关于“ vue工程打包上线样式错乱问题 - bug总结（4种） ” 的全部内容。
vue工程打包上线样式错乱问题 - bug解决（4种）相关推荐
- 部署项目的问题（一）—— vue工程打包上线样式错乱问题
1. 打开index.html一片空白 参考:链接: link. 修改build对象里的assetsPublicPath为'./' assetsPublicPath: './' 2.ElementUI ...
- vue项目打包后样式错乱
问题 在开发的过程中,我们喜欢用里面写某个组件的独有样式.然而项目在打包之后运行在服务器中时,我们会发现scoped并没有生效.这时候有可能会出现样式错乱的情况. 问题产生的原因 vue的项目在打包后 ...
- 基于Vue项目打包上线配置
打包上线 开发阶段 : npm run serve 发布阶段 : npm run build build之前 1. 把基准地址, 由开发阶段的换成发布阶段的 //main.js axios.defau ...
- vue 项目打包上线后 js css 文件找不到
在vue项目完成后打包上线,放到服务器上发现js和css引入不到,页面加载不出来. 在使用vue-cli3以上版本构建的应用时,跟以下方式api有些区别: 如何区分是哪个版本? 可查看项目中是否有co ...
- VUE项目打包后posy代理失效Nginx解决
vue项目打包dist部署Nginx Vueproxy代理失效Nginx解决办法 vue.config.js devServer: {proxy: {"/oauth2": {tar ...
- npm vue工程启动报错 error code ELIFECYCLE 解决历程
vue工程再idea中跑,打开时不小心选择了其他插件,导致无法启动.贴图 看日志文件log 注意选中的地方,度娘访问下,解决方案 Step1:npm cache clean --force Step2 ...
- vue修改html片段的样式无效,vue 组件中添加样式不生效的解决方法
如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 vue 组件 //我用js在上面div标签中插入一个 text goes here export default { ... mo ...
- Vue工程利用HBuild X打包APP打开一片空白的解决方式
Vue工程利用HBuild X打包成APP时有时会出现一片空白的情况,这是由于Vue工程打包出来的静态文件路径出现问题造成的. 解决方式: 在工程下创建vue.config.js文件 在文件中写入: ...
- vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址 问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
最新文章
- 纯PB9开发短文本加密
- sql 计算两个小数乘积_数学家是如何计算出π的?
- Jmater参数说明
- [原创] MyEclipse配置Tomcat和MySQL
- 硬核数据研究：年轻人为什么这么喜欢“哈哈哈哈”？
- [转]Django REST framework 简介与中文教程
- 我为什么辞去 Netflix 价值 45 万美元的开发工作
- poj 1226 Substrings kmp 好题，我调试了一晚上啊！！汗
- phpmyadmin提示SELECT `prefs` FROM `phpmyadmin`.`pma_table_uiprefs` ······
- 安装APK时弹窗提示“Detected problems with app native libraries”
- origin 2019 刻度线消失的问题
- 上课学计算机的周记,计算机实习周记20篇
- Git-删除暂存区文件
- xilinx 高速收发器Serdes深入研究 GTX-3（时钟纠正clock correction）
- rar，zip文件加密判断
- 深度学习优化算法的总结与梳理（从 SGD 到 AdamW 原理和代码解读）
- ai个性化 国庆 头像 合成
- 深天马A：正在筹划非公开发行股票事项
- 【教程】ArcGIS水文分析提取河流及流域
- 轻松项目管理02-项目启动