Vue-cli3配置postcss-px2rem

1. 安装postcss-px2rem

  yarn add postcss-px2rem // 或者 npm install postcss-px2rem

2. 在项目根目录下创建vue.config.js

  const px2rem = require('postcss-px2rem');
  const postcss = px2rem({
    remUnit: 75
  });

module.exports = {
  //设置打包后为相对路径
  publicPath: './',
  css: {
    loaderOptions: {
      postcss: {
        plugins: [ postcss ]
      }
    }
  },
// ... 更多其他代码
}

3. 在home.vue中设置根字体大小

// ...更多其他代码
beforeMount() {
  // 这样避免H5在webview中开始计算的根字体很小
  // 我项目根字体设置的是32px
  let timer1 = setInterval(() => {
    let rootFontSize = (document.documentElement.clientWidth || document.body.clientWidth) / 10;
    document.getElementsByTagName("html")[0].style.fontSize = rootFontSize + "px";
    if (rootFontSize > 32) {
      clearInterval(timer1);
    }
  }, 60);
  let timer2 = setTimeout(() => {
    clearInterval(timer1);
    clearTimeout(timer2);
  }, 3000);
},
// ...更多其他代码