Vue Project uses Webpack loader to convert px to REM

Download lib-flexible

Https://github.com/amfe/lib-flexible

lib-flexible --save

Introduction of Lib-flexible in Main.js

import ‘lib-flexible/flexible‘

Installing Px2rem-loader

Https://github.com/songsiqi/px2rem configuration Px2rem-loader Find Util.js in Build file, add Px2rem-loader to Cssloaders

  const px2remLoader = { loader: ‘px2rem-loader‘, options: { remUnit: 75 } }

Changing the Generateloaders function

  functionGenerateloaders(loader, loaderoptions) { Const loaders = [Cssloader, Px2remloader,postcssloader] //Add Px2remloader if ( Loader) {Loaders.push ({loader:loader + '-loader ', Options:Object.assign ({}, loaderoptions, {sourceMap:options.so Urcemap})}} //Extract CSS when ' option is specified //(which are the case during production build) if (options.extract) { return extracttextplugin.extract ({ use:loaders, fallback: ' Vue-style-loader '})} 
                  
                   else { 
                   return [' Vue-style-loader '].concat (loaders)}}  
                        

Reboot after completion

run dev

Vue Project uses Webpack loader to convert px to REM