在vue中使用Autoprefixed

时间 2019-11-08

标签 vue 使用 autoprefixed 繁體版

原文原文链接

为了使咱们的项目兼容各类浏览器，咱们可能会在开发中写大量的前缀。即便有了IDE为咱们提供了便捷的方式。可是仍然须要咱们去花时间和精力。而这样会浪费咱们不少的时间。为了在开发中提高团队的开发效率，而且同时节省时间，咱们引入了autoprefixed。搭配webpack使用，在每次打包的时候自动的给咱们的样式加上前缀来兼容不一样的浏览器。javascript

安装依赖包

若是你是使用vue-cli构建的项目。首先执行如下代码安装依赖包。css

npm install autoprefixer postcss postcss-loader -D

修改vue-loader配置文件

修改目录/build/vue-loader.conf.js文件。文件的本来代码应该以下。vue

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

将以上代码，替换成以下代码。java

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，定位到以下代码。webpack

postcss: generateLoaders()

将上面的代码更改成以下代码。git

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

从新启动项目，就能够经过chrome的开发者工具，能够看到编译后的css文件，会自动的加上兼容性的前缀。就能够放心的写css代码了。github

欢迎光临我的博客web