The vue project converts px to vw

For mobile projects, it is necessary to do viewport development. Here we use the postcss-px-to-viewport plugin. We need to adjust the width according to the viewport size. This script can convert the px unit in your CSS into vw, 1vw equals 1/100 viewport width.
Step 1:
npm

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

or yarn

yarn add -D postcss-px-to-viewport

Step 2:
Find vue.config.js in the project

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)(\/|\\)/,
          })
        ]
      }
    }
  }
}

Step 3: Save vue.config.js, restart the project, open the console, success