Vue3.0移动端适配自适应

1、安装 lib-flexible

npm install lib-flexible --save-dev

2、在main.js中引入lib-flexible

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// px2rem 自适应
import 'lib-flexible'

createApp(App).use(store).use(router).mount('#app')

3、更改 flexible.js 中的内容

文件路径 node_modules/lib-flexible/flexible.js

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

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

4、安装 postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save-dev

5、创建 postcss.config.js 并写入（和src同级）

module.exports={
    plugins:{
        autoprefixer:{browsers:'last 5 version'},
        'postcss-px2rem-exclude':{
            remUnit:72, //设计稿宽度/10
            exclude:/node_modules|folder_name/i
        }
    }
}

6、重启项目就OK了