vue-cli2打包前和打包后的css前缀不一致的问题解决


Posted in Javascript onAugust 24, 2018

??乱还?/strong>

最近基于vue-cli2 学习webpack,将vue-cli2的webpack配置强撸了一遍,感觉身体已被掏空。。。但还是收获不少的,起码掌握了webpack的一些基本套路、开发环境和生产环境的概念、根据不同的环境写不同的webpack配置、和一些常用插件的用法等。

问题来了

基于vue-cli不用自己配置webpack开撸项目是十分爽的,但当我在撸得正爽的时候发现一个问题,就是项目打包前和打包后的css前缀不一致的,如下(浏览器:Chrome):

--给app.vue下的img添加样式

img{
 display: flex;
 transform: translateX(200px)
}

--打包前(即开发环境)img的样式

vue-cli2打包前和打包后的css前缀不一致的问题解决

--打包后(即生产环境)img的样式

vue-cli2打包前和打包后的css前缀不一致的问题解决

根据上面可看出打包前和打包后元素所带的css前缀不一致了。当我们给一个元素设置css3属性时,是希望它带有浏览器前缀来兼容的。vue-cli也给我们搭建这样的功能(是通过配置postcss的autoprefixer实现的)

--postcss配置写在.postcssrc.js,

module.exports = {
 "plugins": {
  "postcss-import": {},
  "postcss-url": {},
  // to edit target browsers: use "browserslist" field in package.json
  "autoprefixer": {}
 }
}

--浏览器规则则写在package.json上,

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
 ]

--开发环境(build/webpack.dev.conf.js)样式相关的loader

module: {
  rules: utils.styleLoaders({ 
   sourceMap: config.dev.cssSourceMap, 
   usePostCSS: true })
 },

--生产环境(build/webpack.prod.conf.js)样式相关的loader

module: {
  rules: utils.styleLoaders({
   sourceMap: config.build.productionSourceMap,
   extract: true,
   usePostCSS: true
  })
 },

从上面可以看出,vue-cli的开发环境和生产环境都是使用了postcss的,并且配置是一样的,那么为什么打包前和打包后元素所带的css前缀不一致呢,

锁定问题

我们可以分析对比下build/webpack.dev.conf.js和build/webpack.prod.conf.js这两个文件,影响css的无非就module里处理样式的loader和处理css的插件plugin,从上面可以看出影响前缀的postcss的loader在两个环节中是一致的,那么就可以知道问题出在处理css的插件上了。

经过排查发现,webpack.prod.conf.js配置里是多了两个css处理插件的,如下

vue-cli2打包前和打包后的css前缀不一致的问题解决

ExtractTextPlugin这是提取分离css文件,不会影响css前缀,排除,那么问题就锁定到OptimizeCSSPlugin插件身上。再进一步,当我们把OptimizeCSSPlugin插件注释掉,然后打包测试,居然发现这时开发环境和生产环境的css前缀一致了,就是它了!!!

我们打开到npm官网搜一下这家伙https://www.npmjs.com/package/optimize-css-assets-webpack-plugin,这是一个优化压缩css代码的插件,但很失望,文档说明很少

但我们注意到有一句话很关键:

vue-cli2打包前和打包后的css前缀不一致的问题解决

什么鬼,这货里面依赖了cssnano,这插件也是用来优化处理css格式、前缀什么的。同时也有个autoprefixer配置参数,直接到它官网(这个好像需要番墙) https://cssnano.co/ 找到autoprefixer(比较难找得借助翻译):

vue-cli2打包前和打包后的css前缀不一致的问题解决

这里的翻译是:根据browsers选项删除不必要的前缀。请注意,默认情况下,它不会向CSS文件添加新前缀,这就可以解析清除我们的问题了,原来这插件的autoprefixer(默认应该是为true)把它认为不必要的前缀删掉了,而postcss的autoprefixer是将我们设定的浏览器范围的前缀加上,因此完美冲突了

解决问题

最后在github上找到解决方案(忘了复制找不回那地址了,具体为啥这样设置没说,这得深入这个插件的源码了),在build/webpack.prod.conf.js文件中OptimizeCSSPlugin插件的属性cssProcessorOptions加上autoprefixer:false来禁用它,避免冲突

vue-cli2打包前和打包后的css前缀不一致的问题解决

上代码:

new OptimizeCSSPlugin({
   cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: false,autoprefixer:false }
    : { safe: true, autoprefixer: false}
  }),

结论

最后,看看我们dev和build出来的css前缀,应该就一致的了:

问题原因就是:OptimizeCSSPlugin里面依赖了cssnano,而cssnano里面也有一个autoprefixer配置参数,它的作用是删除不必要的前缀(会误删在某些浏览器必要的前缀),这与postcss的autoprefixer效果冲突了,因此禁用它。

现在打包出来的与我们设定的浏览器范围对应的前缀一致,感觉整篇文章有点??铝耍??馐俏医饩稣馕适碧獾难?罚??锹家幌掳桑?缬蟹治霾欢缘穆榉持赋觯?恍唬?/p>

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
canvas绘制七巧板
Feb 03 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 #Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 #Javascript
Vue源码解读之Component组件注册的实现
Aug 24 #Javascript
element-ui 关于获取select 的label值方法
Aug 24 #Javascript
微信小程序用户信息encryptedData详解
Aug 24 #Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 #Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 #Javascript
You might like
Protoss兵种对照表
2020/03/14 星际争霸
smarty的保留变量问题
2008/10/23 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
php cli配置文件问题分析
2015/10/15 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
python读取Kafka实例
2019/12/23 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
关于Java String的一道面试题
2013/09/29 面试题
C#实现启动一个进程
2016/10/01 面试题
会计自荐书
2013/12/02 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
会议接待欢迎词
2014/01/12 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
入党函调证明材料
2015/06/19 职场文书
销售口号霸气押韵
2015/12/24 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS