开发环境和生产环境不同导致的差异。主要是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. C++入门经典-例3.13-不加break的switch判断语句

    1:不加break,会依次运行下面的语句,代码如下: // 3.13.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include &l ...

  2. python学习---50行代码实现图片转字符画1

    转自:https://blog.csdn.net/mm1030533738/article/details/78447714 项目链接: https://www.shiyanlou.com/cours ...

  3. 微信小程序-获取当前位置

    在 app.json 里面增加 permission 属性配置(小游戏需在game.json中配置): "permission": { "scope.userLocati ...

  4. HTML5 localStorage setItem getItem removeItem

    HTML5 WEB存储中提供了两种客户端的数据存储方法:localStorage 还有sessionStorage localStorage: localStorage 方法存储的数据没有时间限制.第 ...

  5. 【Spark机器学习速成宝典】模型篇06随机森林【Random Forests】（Python版）

    目录 随机森林原理 随机森林代码(Spark Python) 随机森林原理 参考:http://www.cnblogs.com/itmorn/p/8269334.html 返回目录 随机森林代码(Sp ...

  6. leetcode-easy-sorting and searching- 278 First Bad Version

    mycode  96.42 # The isBadVersion API is already defined for you. # @param version, an integer # @ret ...

  7. java 中的多态

    多态是面向对象的重要特性,简单点说:“一个接口,多种实现”,就是同一种事物表现出的多种形态. 下面利用代码进行简单概述: 实现多态必须要满足三个条件 1必须有继承 2必须重写 3必须父类引用子类对象 ...

  8. 阶段3 2.Spring_10.Spring中事务控制_9 spring编程式事务控制1-了解

    编程式的事物控制,使用的情况非常少,主要作为了解 新建项目 首先导入包坐标 复制代码 这里默认值配置了Service.dao和连接池其他的内容都没有配置 也就说现在是没有事物支持的.运行测试文件 有错 ...

  9. 阶段3 2.Spring_08.面向切面编程 AOP_9 spring基于注解的AOP配置

    复制依赖和改jar包方式 src下的都复制过来. 复制到新项目里了 bean.xml里面复制上面一行代码到下面.把aop改成context. 配置spring容器创建时要扫描的包 Service的配置 ...

  10. Java学习之==>集合体系（待续。。）

    一.概述 Java的集合体系,本质上是一个陈放数据的容器,像之前学过的数组也是陈放数据的容器,但在 Java 中数组的长度是固定的,使用起来没那么方便.集合提供了更加强大的功能,使用起来也更方便和快捷 ...