vue3.0 PC端项目自适应

1.引入插件
npm install px2rem-loader -S
npm install postcss-px2rem -S
2.在根目录新建文件vue.config.js

// 引入等比适配插件
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
   
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})

module.exports = {
   
  publicPath: "./",
  lintOnSave: true,
  css: {
   
    loaderOptions: {
   
      postcss: {
   
        plugins: [
          postcss
        ]
      }
    }
  }
};

3.在src下新建util/flexible.js文件

(function(win, lib) {
   
  var doc = win.document;
  var docEl = doc.documentElement;
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var flexibleEl = doc.querySelector('meta[name="flexible"]');
  var dpr = 0;
  var scale = 0;
  var tid;
  var flexible = lib.flexible || (lib.flexible = {
   });

  if (metaEl) {
   
      console.warn('将根据已有的meta标签来设置缩放比例');
      var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
      if (match) {
   
          scale = parseFloat(match[1]);
          dpr = parseInt