vue项目把px转成vw

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

移动端项目,做视口开发很有必要的,这里我们用到的是postcss-px-to-viewport插件,需要做根据视口大小来调整宽度，这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。

第一步:

npm

npm install postcss-loader postcss-px-to-viewport --save-dev

或者yarn

yarn add -D postcss-px-to-viewport

第二步:
找到项目中的vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px",
            viewportWidth: 750,
            unitPrecision: 3,
            propList: [
              "*"
            ],
            viewportUnit: "vw",
            fontViewportUnit: "vw",
            selectorBlackList: ['.ignore', '.hairlines'],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: /(\/|\\)(node_modules)(\/|\\)/,
          })
        ]
      }
    }
  }
}

第三步:保存vue.config.js,重启项目,打开控制台,成功