1、使用transform：scale（缩放实现）,页面设置为高1080，宽为1920，然后使用document.documentElement.clientWidth和document.documentElement.clientHeight获取到当前页面的大小，根据设置的宽高计算出百分比进行缩放。具体代码如下：

data:{
    return:{
        timeIndex: null,    // 定时器
        designWidth: 1920,  // 宽
        designHeight: 1080, // 高
        renderDom: "#container"  // DOM元素
    }
}


// 在mounted中运行
mounted() {
    this.keepFit(this.designWidth, this.designHeight, this.renderDom);
    window.addEventListener('resize', this.handleResize);
},

methods:{
    // 监听浏览器窗口大小变化
        handleResize() {
            if (this.timeIndex) {
                clearTimeout(this.timeIndex);
            }
            this.timeIndex = setTimeout(() => {
                this.keepFit(this.designWidth, this.designHeight, this.renderDom);
            }, 600);
        },
    // 自适应
        keepFit(designWidth, designHeight, renderDom) {
            // 获取浏览器窗口的宽度和高度
            // const clientWidth = window.innerWidth;
            const clientWidth = document.documentElement.clientWidth;
            // const clientHeight = window.innerHeight;
            const clientHeight = document.documentElement.clientHeight;
            // 计算宽度和高度的缩放比例
            const scaleWidth = clientWidth / designWidth;
            const scaleHeight = clientHeight / designHeight;
            // 取宽高缩放比例的最大值，确保元素不会超出浏览器窗口
            const scale = Math.max(scaleWidth, scaleHeight);
            // 设置元素的缩放比例和位置
            const element = document.querySelector(renderDom);
            element.style.transform = `scale(${scaleWidth})`;
            element.style.transformOrigin = 'top left';
            element.style.position = 'absolute';
            element.style.top = '0px';
            element.style.left = '0px';
            element.style.width = `${designWidth}px`;
            element.style.height = `${designHeight}px`;
        }
}

// 销毁页面时关闭计时器
beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.timeIndex) {
            clearTimeout(this.timeIndex);
        }
    }

2、可以使用autofit.js插件实现自适应。

      2.1、下载命令

npm install autofit.js

       2.2、如果是单页面自适应就在自适应页面引入，全局的话在app.vue页面引入。

import autofit from "autofit.js"



mounted() {
	autofit.init({
        designHeight: 1080, // 高
        designWidth: 1920,  // 宽
        renderDom:"#app",   // dom元素
        resize: true        // 开启
    },false) // 可关闭控制台运行提示输出
  },