Vue项目使用PostCSS做h5页面的屏幕适配的配置步骤

npm install -g @vue/cli
vue create my-vue-project
cd my-vue-project

npm install postcss postcss-loader postcss-pxtorem --save-dev

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 37.5, // 根元素字体大小，根据设计稿调整，一般设置为设计稿宽度的1/10
            propList: ['*'], // 需要转换的属性，* 表示所有属性都转换
            selectorBlackList: ['.ignore-'], // 选择器黑名单，匹配到的选择器中的 px 不转换
            minPixelValue: 2 // 最小转换的像素值，小于该值的 px 不转换
        }
    }
};

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                postcssOptions: {
                    plugins: [
                        require('postcss-pxtorem')({
                            // 这里的配置也可以直接写在 postcss.config.js 里
                            // 如果你已经在 postcss.config.js 配置好了，这里可以省略
                        })
                    ]
                }
            }
        }
    }
};

<template>
  <div class="box">
    This is a box.
  </div>
</template>

<style scoped>
.box {
    width: 375px;
    height: 100px;
    font-size: 16px;
    background-color: lightblue;
}
</style>

// src/main.js
new Vue({
    render: h => h(App),
}).$mount('#app');

// 设置根元素字体大小
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
window.addEventListener('resize', () => {
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
});

npm run serve