vue项目平铺整个页面

缩放浏览器窗口，项目缩放平铺整个页面

修改App.vue文件

<template>
  <div id="app" class="app" :style="{'width':`${style.width}px`,'height':`${style.height}px`,'transform':`${style.transform}`}">
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      style: {
          width: 1920,
          height: 1080,
          transform: "scaleY(1) scaleX(1) translate(-50%, -50%)",
          // img:require("../assets/layout/背景.png")
      },
    };
  },
  mounted() {
    let that = this;
    that.setScale();
    /*窗口改变事件*/
    window.addEventListener("resize", function () {
        that.setScale();
    });
  },

  methods: {
      getScale() {
          const w = window.innerWidth / this.style.width;
          const h = window.innerHeight / this.style.height;
          return {x:w,y:h};
      },
      setScale() {
          let scale = this.getScale();
          this.style.transform = "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
      },
  },
}
</script>

<style lang="scss">
.app {
    transform-origin: 0 0;
    position: fixed;
    left: 50%;
    top: 50%;
}
</style>