vue-cli 打包编译 -webkit-box-orient: vertical 被删除解决办法

前言

-webkit-box-orient: vertical在本地开发环境运行都没问题，一旦打包以后就会丢失

正文

原因:

-webkit-box-orient: vertical  这个属性被 optimize-css-assets-webpack-plugin插件在编译时删除掉了

方法1. 解决办法(亲测无效,但是网上有说这种解决办法能处理)：

将webpack.prod.conf.js文件中关于optimize-css-assets-webpack-plugin的配置项由

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

改为

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

这样再打包就不会被删除了

方法2. 解决办法(亲测有效)

在package.json文件中进行如下修改：

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "iOS >= 6",
    "Android > 4.1",
    "Firefox > 20"
  ]

这样postcss在处理的时候就会自动加上兼容对应浏览器版本的一些属性。

方法3. 解决办法 

autoprefixer不仅会帮你加-webkit-之类的prefixer， 
它还会帮你删除你自己写在 css/sass/less里的样式， 
真是厉害了

关闭autoprefixer的自动删除功能，这样：

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

用注释包裹的中间这一句就不会被删除

参考:

https://blog.csdn.net/Candy_home/article/details/79646655