vue-cli的两个深坑

479 阅读1分钟

用vue-cli搭建的小型项目,再生产打包发现两个深坑。

1.html中不能使用es6。 需要手动配置

2.webpack.prod.conf.js 中OptimizeCSSPlugin 此插件依赖cssnano。

cssnano是基于postcss的一款功能强大的插件包,它集成了近30个插件,只需要执行一个命令,就可以对我们的css做多方面不同类型的优化,比如:

  • 删除空格和最后一个分号
  • 删除注释
  • 优化字体权重
  • 丢弃重复的样式规则
  • 优化calc()
  • 压缩选择器
  • 减少手写属性
  • 合并规则
  • ...

but  cssnano里面也有一个autoprefixer配置参数,它的作用是删除不必要的前缀(会误删在某些浏览器必要的前缀),这与postcss的autoprefixer效果冲突

**因此增加配置项 **autoprefixer:false。

这样打包的出来 css 前缀 dev和prod 一致。