Vue-cli4.x中配置Autoprefixer

最新推荐文章于 2022-04-30 16:04:55 发布
最新推荐文章于 2022-04-30 16:04:55 发布
阅读量1.1k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue-cli3打包配置 文章标签： vue.js javascript postcss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/My_Java_Life/article/details/121765226
本文介绍了如何在VueCLI项目中修改.postcssrc.js和.browserslistrc文件来配置PostCSS的autoprefixer插件，以自动添加浏览器前缀。通过将.browserslistrc设置为'last 20 versions'进行测试，确保样式兼容性。修改后需重启项目才能看到效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue CLI 内部使用了 PostCSS
所以只需要修改.postcssrc.js和.browserslistrc文件即可，没有的话新建文件
在这里插入图片描述
.postcssrc.js

module.exports = {
  plugins: {
    "autoprefixer": {}
  }
};

.browserslistrc

> 1%
last 2 versions
not dead

测试的时候可以把.browserslistrc改成最后20个版本，否则可能看不到效果，
修改后需要重启

> 1%
last 20 versions
not dead

效果如下图，flex自动加了前缀
在这里插入图片描述

vue-cli2.x 3.x 实现完美的移动端适配【完美还原设计图UI的方法】
cometang--唐家世少
05-07 1382
需求：自己经常会做移动端开发相关的项目，用了非常多的适配移动端的方法，其中包括有：最原始的百分比流式布局；类似bootstrap/element的栅格布局；css3的媒体查询（@media）+rem单位;利用js监听设备宽度动态实现加载不同的css文件；淘宝的flexible.js(不得不说淘宝的解决方案不错，但已经被淘宝弃用了)，现在最为流行的适配方案就是今天重点说的方法：通过vue脚手架的po...
Vue 4.2.3 cli脚手架创建的项目没有postcssrc.js，怎么配置postcss vw适配？
silencejan的博客
05-27 3117
Vue 4.2.3 cli创建的项目里面没有postcssrc.js相关的配置，没有只好手动创建了 参考文档： lingshui147 要做前端的一股清流 1.在项目的根目录下新建一个postcss.config.js配置文件 2.并且在配置文件里写入 postcss.config.js module.exports = { plugins: { 'postcss-import': {}, 'postcss-url': {}, 'postcss-aspect-ratio-min
关于在vue-cli中使用autoprefixer问题
weixin_34318272的博客
03-11 4979
作为前端开发css的兼容问题是不可避免的，下面我将介绍在vue-cli中如何使css在编译的时候自动添加厂商前缀。首先我们在初始化的vue-cli根目录下找到.postcssrc.js 文件。 在这里我们可以看到关于autoprefixer的配置是在package.json下的browserslist选项 通过在browserslist中配置autoprefixer兼容要求，通过npm run...
vue-cli3使用autoprefixer自动添加浏览器前缀
rayshaan0123的博客
08-14 1310
01.下载包 npm i postcss-loader autoprefixer@8.0.0 -D autoprefixer基于postcss，所有也要下载 postcss，注意指定版本号不要太高 02.项目根目录下创建postcss.config.js //postcss.config.js内容 module.exports = { plugins: { autoprefixer: {} } } 03.配置package.json的browserslist //根据需要来配置
vue-cli3.0配置autoprefixer+postcss-plugin-px2rem（从创建开始）
qq_38935512的博客
12-28 2509
前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。这里配置autoprefixer css后处理器自动兼容 看下效果 先单独配置autoprefixer CSS，less,sass都有用 1.vue create XXX 项目 这个就不多说了 2.安装相关依赖 npm install -D css-loader style-loader npm install -D postcss-loader autoprefixer postcss(这个我装的时候失败了，之后
vue cli4 浏览器前缀 自动补全
唐僧的专栏
05-06 592
最近做一个 电脑端的 网页； 需要兼容浏览器； 不同浏览器 有不同的前缀；想想头都大！ 还有脚手架为我们提供了 postcss-loader 和 autoprefixer npm install postcss-loader autoprefixer --save-dev 项目使用 vue cli4 创建的；网上教程都是在 webpack.config.js 中进行配置！ 然而我却找不到 webpack.config.js 文件.... 插件安装完毕之后 会有 browse...
vue-cli4的使用与配置
xiao1215fei的专栏
09-15 1283
关于旧版本 Vue CLI 的包名称由vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x)，你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。 Node 版本要求 Vue CLI 4.x 需要Node.jsv8.9 或更高版本 (推荐 v10 以上)。你可以使用n，nvm或nvm-windows在同一台电脑中管理多个 Node 版本。 由于 Nod...
vue-cli4.x创建企业级项目的方法步骤
10-15
本篇文章将详细介绍如何使用 Vue CLI 4.x 创建一个企业级项目，并涵盖关键步骤和配置。 首先，确保你已经安装了 Node.js，因为 Vue CLI 是基于 Node.js 的。然后，你需要全局安装 Vue CLI： ```bash $ npm install...
vue-cli 3.x中项目结构及文件组织
Vue CLI 3.x 的核心特点包括零配置快速原型开发、基于插件的可扩展特性、项目内部配置的即时即用、针对生产环境的优化打包等。 ## 1.2 Vue CLI 3.x 相对于 2.x 的变化 与 Vue CLI 2.x 相比，Vue CLI 3.x 在性能、...
使用vue cli4.x搭建vue项目的过程详解
10-15
读者通过阅读本文，可以了解升级到Vue CLI 4.x的动机，以及在搭建新Vue项目的过程中，如何进行项目创建、配置选择和功能模块的整合。 首先，升级到Vue CLI 4.x的原因可能包括了对旧版本bug的修复，新特性或更好的...
安装pocss插件autoprefixer
chencaw的专栏
02-17 756
安装pocss插件autoprefixer npm install --save-dev autoprefixer
Vue PostCss插件——autoprefixer配置完成后无效，已解决
足各路
06-25 1万+
在配置autoprefixer时，按照之前的配置可以成功补全css浏览器前缀，但是结合postcss-pxtorem插件，px可以成功转换为rem，但css前缀无效。 经过几个小时的鼓捣，终于让我发现了蛛丝马迹。哈哈哈，很开心，好激动！！ 一起来看一看博主陷入的困境吧。 1. autoprefixer的配置 根目录postcss.config.js文件中，配置代码如下： module.exports = { plugins: { 'autoprefixer': { overrid.
webpack学习笔记
qq_42356513的博客
04-30 726
相关命令 打包 webpack 查看打包相关详细信息 webpack --stats detailed 设置打包入口文件 webpack --entry 文件路径 设置打包模式 webpack --mode production/development 修改文件自动打包 webpack --watch 热更新(ctrt+s后页面自动更新内容) 先安装依赖 npm i webpack-dev-server 修改配置项 devServer: { // 提供静态文件目录地址,就是热更新时候
在 vue 项目中，使用 autoprefixer -- CSS后处理器
l的博客
09-20 3723
以下是基于webpack项目下的解决方案，参考了：https://segmentfault.com/q/1010000009043539/ 在 项目名/build/webpack.base.conf.js 里加上 constautoprefixer=require("autoprefixer") postcss:[require('autoprefixer')({ browsers: ...
vue项目配置 autoprefixer 报出警告问题
qq_37942845的博客
07-08 1万+
vue项目autoprefixer 控制台 出现了警告问题： Replace Autoprefixer browsers option to Browserslist config Use browserslist key in package.json or .browserslistrc file. 原因是版本高了，引用有修改 postcss.config.js ...
vue使用 postcss-loader和autoprefixer插件
qq_30340185的博客
10-31 3550
 使用postcss-loader和autoprefixer插件，可以自动处理样式，给样式加上兼容前缀 1.npm i postcss-loader autoprefixer -D 2.新建postcss.config.js和.babelrc postcss.config.js const autoprefixer = require('autoprefixer') module.ex...
vue cli 3.0快速创建项目
热门推荐
xuqipeter的博客
05-25 4万+
本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npm npm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set registry https://registry.npm.taobao.org cnpm config set registry https:/...
vuecli开发过程中一些不兼容的属性比如flex怎么自动加前缀
a331790021的博客
03-28 1591
直接在package.json中修改一下配置，重新打包 本来是要在.postcssrc.js中修改autoprefixer配置的 但是vuecli下载后.postcssrc.js文件提示 module.exports = { "plugins": { // to edit target browsers: use "browserslist" field in package.json...
vue-cli脚手架配置基础文件详解/新手入门必看
qq_42177730的博客
05-28 8132
vue-cli 脚手架中webpack 配置基础文件详解一、前言vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值