vue-cli3创建项目实现px2rem

1、安装

npm install postcss-plugin-px2rem --save-dev

2、引入配置

// vue.config.js
const px2rem = require("postcss-plugin-px2rem");

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          px2rem({ // postcss-plugin-px2rem 默认配置
            rootValue: 37.5, // 默认100
            unitPrecision: 5,
            propWhiteList: [],
            propBlackList: [],
            exclude: false,
            selectorBlackList: [],
            ignoreIdentifier: false,
            replace: true,
            mediaQuery: false,
            minPixelValue: 0
          })
        ]
      }
    }
  }
};

3、修改index.html

// 原内容
<meta name="viewport" content="width=device-width,initial-scale=1.0">
// 修改为
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

4、看效果

#app {
  text-align: center;
  font-size: 30px;
}