vue-cli3使用autoprefixer(在本地运行和打包时)自动添加浏览器前缀

最新推荐文章于 2025-10-08 07:36:29 发布

原创最新推荐文章于 2025-10-08 07:36:29 发布 · 900 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何在Vue-cli3项目中使用autoprefixer，解决浏览器前缀问题。通过安装依赖并配置postcss.config.js及package.json，确保在本地运行和打包时自动添加浏览器兼容性前缀。

下载依赖
```
npm i postcss postcss-loader autoprefixer@8.0.0 -D
```
这一步可能会报错

好像是版本冲突了, 提示可以在安装时加上–force (感觉不太妙的命令)或 --legacy-peer-deps
试着运行命令
```
npm i postcss postcss-loader autoprefixer@8.0.0 -D --force
```
成功下好了依赖

配置文件
a. 项目根目录下创建postcss.config.js
内容如下:

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

b. 项目根目录下的package.json

"browserslist": [
    "> 1%",
    "last 3 versions",
    "ie >= 9",
    "safari >= 6",
    "ios >= 6",
    "android >= 4.4",
    "firefox >= 8",
    "chrome >= 24",
    "Opera>=10"
]