在vue中使用Autoprefixed

爲了使咱們的項目兼容各類瀏覽器，咱們可能會在開發中寫大量的前綴。即便有了IDE爲咱們提供了便捷的方式。可是仍然須要咱們去花時間和精力。而這樣會浪費咱們不少的時間。爲了在開發中提高團隊的開發效率，而且同時節省時間，咱們引入了autoprefixed。搭配webpack使用，在每次打包的時候自動的給咱們的樣式加上前綴來兼容不一樣的瀏覽器。

安裝依賴包

若是你是使用vue-cli構建的項目。首先執行如下代碼安裝依賴包。

npm install autoprefixer postcss postcss-loader -D

修改vue-loader配置文件

修改目錄/build/vue-loader.conf.js文件。文件的本來代碼應該以下。

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config[buildEnv].productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  })
}

將以上代碼，替換成以下代碼。

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config[buildEnv].productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  postcss: [require('autoprefixer')({browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8']})]
}

修改utils

打開/build/utils.js，定位到以下代碼。

postcss: generateLoaders()

將上面的代碼更改成以下代碼。

postcss: generateLoaders(['css?-autoprefixer'])

從新啓動項目，就能夠經過chrome的開發者工具，能夠看到編譯後的css文件，會自動的加上兼容性的前綴。就能夠放心的寫css代碼了。