今天做練手專案部署的時候碰到了個奇怪問題，開發環境裡顯示得好好的CSS prefixer樣式，到production環境就消失了。
我開發環境用的是 scss ，剛開始我還以為是 scss 處理器的問題，後來研究了下 build 指令碼，發現人家把CSS統一用一個外掛給壓縮了，然後追查之下發現這個外掛用了 postCSS 的 autoprefixer 外掛。
這下問題就清楚了，因為 autoprefixer 外掛會針對支援的瀏覽器進行CSS 字首的刪除和追加。

比如：

a {
  -webkit-border-radius: 5px;
          border-radius: 5px;
}
 

編譯成:

a {
  border-radius: 5px;
}

autoprefixer 使用了 browserslist 作為依賴。在專案目錄中執行:

npx browserslist

可以檢視當前專案支援的瀏覽器列表，這時候只要修改當前專案支援的瀏覽器就可以了。
vue-cli生成的專案預設支援部分移動端瀏覽器和最新版本的PC端瀏覽器。

在 package.json 中修改 browserslist ：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "last 10 Chrome versions",
  "last 5 Firefox versions",
  "Safari >= 6",
  "ie > 8"
]
 

之後再執行 npm run build 這時生成的程式碼就有 css prefix 了。

部落格原文： http://www.zhuyuwei.cn/2018/v...

轉載於：https://segmentfault.com/a/1190000014633347