开发环境生产环境不同导致的差异。主要是css层级有变动;
开发环境只是单纯的使用了style-loader进行style标签插入,不进行额外的处理,比如说资源合并和添加md5后缀等,这样做是为了让编译速度更快,开发体验更好。

1)开发环境下的style可能有5个;顺序为a.css  b.css c.css d.css e.css

而生产可能顺序就打乱了层级有改动

2)原本第三方ui库是以style注入的层级比极高(开发环境),生产环境即打包单独link引入

层级也有改变

生产环境下的

预加载全局的css和第三方css;返回第三方的慢;怎么先挂载到header里????

开发环境

开发css加载顺序

3)本地开发样式浏览器前缀和生产不一样;生产被删除了

https://segmentfault.com/a/1190000016123664

https://juejin.im/post/5c35df04f265da6158775732

vue-cli中开发生产css注入形式不同导致bug的更多相关文章

  1. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  2. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  3. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  4. vue.cli 中使用 less 来写css样式

    vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...

  5. vue的cli中引入css文件

    在public文件中创建一个文件夹css,放进reset.css 在main.js中引入即可 import '../public/css/reset.css'就可以啦

  6. scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

    css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.confi ...

  7. Vue-axios 在vue cli中封装

    common/post.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseU ...

  8. Vue.js中css的作用域

    Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...

  9. Vue CLI 是如何实现的 -- 终端命令行工具篇

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...

随机推荐

  1. 前端面试题总结——HTML(持续更新中)

    前端面试题总结--HTML(持续更新中) 1.什么是HTML? HTML:HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的WE ...

  2. web服务基础

    Web服务基础 用户访问网站的基本流程 我们每天都会用web客户端上网,浏览器就是一个web客户端,例如谷歌浏览器,以及火狐浏览器等. 当我们输入www.oldboyedu.com/时候,很快就能看到 ...

  3. Cassandra 如何处理跨数据中心的数据库延时问题

    分布式系统的可靠.延时.一致性等问题是一般性问题,不局限于数据库,而Cassandra提供了一个很好的解决思路. Cassandra号称能做到跨数据中心的数据库访问的高效访问,它的实现方式其实是把延时 ...

  4. 运算 Kotlin(3)

    运算Kotlin支持数字运算的标准集,运算被定义为相应的类成员(但编译器会将函数调用优化为相应的指令) . 参见运算符重载.对于位运算,没有特殊字符来表示,而只可用中缀方式调用命名函数,例如:val ...

  5. python 实验3 循环结构

    实验一   九九乘法表 ‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫‪描述:输出一个九九乘法表,格式如下:‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫‪ 1*1=1‪‪ ...

  6. C# 获取当前活动网络连接mac地址

    IPAddress localIp = null; IPAddress[] ipArray; ipArray = Dns.GetHostAddresses(Dns.GetHostName()); lo ...

  7. Python unittest 之 BeautifulReport可视化报告

    众所周知的报告是HTMLTestRunner,虽然经过众多的大神修改后,功能挺强大的,但这颜值,我就不多说了,大家自己感受下吧 HTMLTestRunner就不多说了,近来发现了一款款式新颖,还不漏油 ...

  8. 【HANA系列】SAP 一位SAP培训顾问的建议:SAP HANA应该如何学习?

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP 一位SAP培训顾问的建议 ...

  9. 华为HCNA乱学Round 2:路由基础

  10. scrapy 正则汉字的提取方法

    [\u4E00-\u9FA5]