在vue中使用Autoprefixed的方法

这篇文章主要为大家详细介绍了在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代码了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/5956-0.html

注：关于在vue中使用Autoprefixed的方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js