vue转移动端项目自适应 使用postcss-plugin-px2rem

需要使用两个插件：

1.amfe-flexible

amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

2.postcss-pxtorem

postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。

二者需要搭配使用，只使用一个不产生效果

安装：

npm install amfe-flexible --save
npm install postcss-pxtorem --save

使用

amfe-flexible 只需要在main中引入即可：

import 'amfe-flexible';

配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可：

这里我在vue.config.js中配置：

module.exports = defineConfig({
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-plugin-px2rem')({
              rootValue: 37.5,
              exclude: /(node_modules|pc|components|css)/, //正则 排除不需要自适应的文件 注意：文件夹名中如果是mbcomponents也会被忽略
              mediaQuery: false,
            }),
          ],
        },
      },
    }, //移动端自适应
  },
})

重启即可实现效果

参考：

https://blog.csdn.net/qq_39287602/article/details/109047223