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