在vue中使用Autoprefixed的方法

为了使我们的项目兼容各种浏览器,我们可能会在开发中写大量的前缀。即使有了IDE为我们提供了边界的方式。但是仍然需要我们去花时间和精力。而这样会浪费我们很多的时间。为了在开发中提升团队的开发效率,并且同时节省时间,我们引入了autoprefixed。搭配webpack使用,在每次打包的时候自动的给我们的样式加上前缀来兼容不同的浏览器。

安装依赖包

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

css-loader -D

修改vue-loader配置文件

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

将以上代码,替换成如下代码

= 6','ie > 8']})] }

修改utils

打开/build/utils.js,定位到如下代码

将上面的代码更改为如下代码

重新启动项目,就可以通过chrome的开发者工具,可以看到编译后的css文件,会自动加上兼容性的前缀。就可以放心的写css代码了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

问题现象 elmentui的el-tree数据加载问题,导致第一次加载选中当前节点和高亮当前节点没有生效。 解决方...
因为刚打开文件,vscode默认是预览状态,如果编辑过之后,就不会有这个问题。 可以通过双击将预览状态接...
前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下这篇文章。 h...
在项目中引入动态路由时报错 写法: 报错: Module build failed (from ./node_modules/_eslint-loader@2...
问题产生 在使用babel编译es6时,遇到报错Uncaught ReferenceError: regeneratorRuntime is not define...
父组件的编写 <a:orgCode=orgCode ></a> 在data里面增加...