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