vue項目text-overflow:ellipsis;在生產環境上不顯示...的問題

首先科普下文本溢出顯示...的代碼：

單行文本溢出：{overflow: hidden; text-overflow:ellipsis;white-space:nowrap;width:150px}

多行文本溢出：{overflow: hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:@line(行數)}

然后問題來了：測試環境上文本溢出正常顯示...，正式環境環境則溢出隱藏，不顯示...

經排查：發現是打正式包時webpack沒有編譯這個屬性：-webkit-box-orient:vertical;

問題找到了，接下來跟蹤打包，找出了optimize-css-assets-webpack-plugin這個導致問題的插件

注釋掉webpack.prod.conf.js中下面的代碼

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

問題解決了，但是css也沒有壓縮，並且原因也不明

於是請教度娘，找到了另一個解決辦法，在-webkit-box-orient:vertical;位置添加如下代碼, 關閉autoprefixer的自動刪除功能即可

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

tip：如果使用的css前面不需要！,如果和我一樣用了scss或less, 前面的！不能少，很多方案提供的答案前面都沒有！, 導致我試過一直無效