解決vue-cli build打包後CSS瀏覽器兼容前綴自動去除的問題

今天作練手項目部署的時候碰到了個奇怪問題，開發環境裏顯示得好好的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...