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