vue+element PC系统自适应

这里需要借助到几个插件

1.lib-flexible

npm install lib-flexible --save

安装完后再main.js文件中直接引入即可

import "lib-flexible"

注意，这个插件安装后需要在依赖中改变屏幕宽度，因为这个插件是为移动端设计的，最大宽度是540px，需要在/node_modules/lib-flexible/flexible.js这个路径下，将下图红框处修改成width即可（源代码这个地方是540）

2.px2rem-loader 或者 postcss-pxtorem，这两个插件是把px单位根据设计搞转换成rem的，安装其一即可

npm install px2rem-loader 

npm install postcss-pxtorem 

vuecli3及以上版本的，使用px2rem-loader 插件的话，在vue.config.js文件里配置一下代码

 module.exports = {
 chainWebpack: (config) => {
    config.module
      .rule("less")
      .test(/\.less$/)
      .oneOf("vue")
      .use("px2rem-loader")
      .loader("px2rem-loader")
      .before("postcss-loader") // this makes it work.
      .options({
        remUnit: 144,//此处是设计稿缩小10倍的尺寸，可根据自己设计稿情况调整
        remPrecision: 2,//转换成rem单位后保留的小数位数
      })
      .end();
      }
      }

使用postcss-pxtorem插件的,在src同级目录下创建.postcssrc.js文件，在此文件内配置如下代码

module.exports = ({ file }) => {
  let isElement = file && file.dirname && file.dirname.indexOf("el") > -1;
  if (isElement) {
    // 判断条件  如有多种情况，进行不同判断
    rootValue = 144;//可以根据所安装的UI框架尺寸来调整
  } else {
    rootValue = 144;//此处是设计稿缩小10倍的尺寸
  }
  return {
    plugins: {
      autoprefixer: {
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8",
        ],
      },
      "postcss-pxtorem": {
        rootValue: rootValue,
        unitPrecision: 2, // rem的小数点后位数
        propList: ["*"],
      },
    },
  };
};

px2rem-loader暂时没有找到同时转换UI框架里px的方法，postcss-pxtorem经配置后对UI框架里的px单位也可以转换成rem,但两个插件都不能把行内样式的px单位转换成rem,所以还需要下面的第三个插件

3.style-rem-loader 这个插件会把行内的px单位转换成rem

npm install style-rem-loader --save

vuecli2 的配置

{
    test: /\.(vue|jsx?)$/,
    loader: 'style-rem-loader',
    options: {
        unitToConvert: "px",
        viewportWidth: 1440,//设计稿1:1的尺寸
        unitPrecision: 2,//rem的小数位数
        viewportUnit: "rem",
        fontViewportUnit: "rem",
        minPixelValue: 1,
    }
}

vuecli3的安装后在vue.config.js文件里如下配置

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .test(/\.vue$/)
      .use("style-rem-loader")
      .loader("style-rem-loader")
      .options({
        unitToConvert: "px",
        viewportWidth: 1440,//设计稿1:1的尺寸
        unitPrecision: 2,//rem的小数位数
        viewportUnit: "rem",
        fontViewportUnit: "rem",
        minPixelValue: 1,
      })
      .end();
  },
};

若需要UI框架也跟着把px单位转换成rem则需要在 .postcssrc.js文件里配置一下，没有这个文件可以新建一个

module.exports = ({ file }) => {
    let isElement = file && file.dirname && file.dirname.indexOf("el") > -1;//判断出需要转换单位的UI框架
    if (isElement) {
      // 判断条件  如有多种情况，进行不同判断
      rootValue = 144;//设计稿尺寸
    } else {
      rootValue = 144;
    }
    return {
      plugins: {
        autoprefixer: {
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8",
          ],
        },
        "postcss-pxtorem": {
          rootValue: rootValue,
          unitPrecision: 2, // rem的小数点后位数
          propList: ["*"],
        },
      },
    };
  };

至此，重新启动项目即可生效