vue开发页面自适应屏幕尺寸的实例代码

# 安装lib-flexible插件
yarn add lib-flexible
# 安装px2rem-loader插件 -D 安装到开发环境
yarn add -D px2rem-loader

import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"
import "@/assets/scss/reset.scss"
import axios from "axios"
// UI
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

// tools
// 引用lib-flexible插件
import "lib-flexible"

module.exports = {
  configureWebpack: {
    // webpack 配置
    output: {
      filename: ,
      chunkFilename: `,
    },
  },
  // 配置px2rem-loader
  chainWebpack: config => {
    config.module
      .rule("css")
      .test(/\.css$/)
      .oneOf("vue")
      .resourceQuery(/\?vue/)
      .use("px2rem")
      .loader("px2rem-loader")
      .options({
      // 设置px转化为rem比例，设计稿大小为1920，比例 1920/ 10
        remUnit: 192
      });
  },
}

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
        	// 将width = 540 * dpr; 540改为width
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }