Detailed explanation of the adaptive adaptation problem of Vue mobile terminal

// Base size const baseSize = 32
// Set rem function function setRem () {
  // The scaling ratio of the current page width relative to 750 width, which can be modified according to your needs.
  const scale = document.documentElement.clientWidth / 750
  // Set the font size of the root node of the page document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// Initialize setRem()
// Reset rem when changing window size
window.onresize = function () {
  setRem()
} 

import './utils/rem' 

npm install postcss-pxtorem -D 

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": {
      "rootValue": 32,
      "propList": ["*"]
    }
  }
} 

module.exports = { 
  //Double-click the index.html file to run directly publicPath: './',
  // The directory for the production environment build files generated when running vue-cli-service build outputDir: 'dist',
  lintOnSave: true,
  // Whether to use a Vue build that includes a runtime compiler. After setting true, you can use template
  runtimeCompiler: true,
  //Whether to generate sourceMap file in production environment For details of sourceMap, please see the end productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') { // Modify config for production environment...
      return {

      }
    } else {
      return {

      }
    }
  },
  css: {
    extract: true, // Enable CSS source maps?
    sourceMap: false, // css preset configuration items modules: false,
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // base of conversion selectorBlackList: ['weui', 'mu'], // ignore conversion regular matching items propList: ['*']
          })
        ]
      }
    }
  },

  // webpack-dev-server related configuration devServer: { // Set proxy hot: true, // Hot load host: '0.0.0.0', // IP address port: 8082, // Port https: false, // false turns off https, true turns it on open: true, // Automatically open the browser overlay: {
      warnings: false,
      errors: false
    }
  }
}