vue项目PC端窗口大小自适应

一、npm安装依赖
项目基础配置使用 vue-cli 生成
自适应方案核心： 阿里可伸缩布局方案 lib-flexible
px转rem：px2rem，它有webpack的loader px2rem

npm i lib-flexible -S
cnpm install postcss-px2rem --save

二、在vue.config.js配置，这是按照1920*1080缩放

css: {
   
    loaderOptions: {
   
        postcss: {
   
            plugins: [
                require('postcss-px2rem')({
   remUnit: 192}), // 换算的基数
            ]
        }
    }
},

三、main.js 中引入flexible

import 'lib-flexible'

到这里自适应已经生效了
这里还有一个问题，就是屏幕宽度大于540的时候，把屏幕宽度写死成540了
找到路径\node_modules\lib-flexible\flexible.js
修改成这样

因为上边的修改，每次装依赖，都需要改动，这里提取出来就好：在utils目录下新建flexible.js文件

然后在main.js中引入

//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\.]+)/