在vue中使用Autoprefixed

Posted 2020-12-25 detectivehlh

为了使我们的项目兼容各种浏览器，我们可能会在开发中写大量的前缀。即使有了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代码了。