vue 移动端自适应

1. 安装 amfe-flexible 实现 自适应

npm install amfe-flexible

2. 安装 postcss-pxtorem 实现自动将 px 转换成对应的rem

npm install postcss-pxtorem

3. 在 vue.config.js module.exports 中配置一下代码

css: {
    loaderOptions: {
      postcss: {
        postcssOptions:{
          plugins: [
            require("postcss-pxtorem")({
              // 把px单位换算成rem单位
              // rootValue({ file }) {
              //   console.log(file);
              //   return file.indexOf('vant') !== -1 ? 37.5 : 75;
              // }, // 换算的基数(设计图750的根字体为75)
              rootValue: 37.5,
              // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
              propList: ["*"],
            }),
          ],
        },
      },
    },
  },

4. 在 main.js 中引入

import 'amfe-flexible';

5. 重新运行 vue 项目查看是否生效