第一步：安装

npm install v-scale-screen 或 yarn add v-scale-screen

第二步：main.js中引入

import Vue from 'vue'
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)

第三步：页面使用

<template><v-scale-screen width="1920" height="1080"><div></div></v-scale-screen>
</template>

注意：

我在安装的时候vue报错了，原来是vue版本的问题，需要vue@2.6.14。

npm install -g @vue/cli@2.16.14npm install vue-template-compiler@2.6.14 --save

 v-scale-screen 默认等比例屏幕缩放，当视图不满足比例，上下或左右会有留白（黑框）。如果想要铺满全屏，且对视图拉伸无感，可以配置autoScale，或者将fullScreen设置为true

<!-- 铺满全屏 -->
<v-scale-screen ref="scale-screen" width="1920" height="1080" :fullScreen="true"><div></div>
</v-scale-screen>

留白的颜色也可自定义，

<!-- 铺满全屏 -->
<v-scale-screen ref="scale-screen" width="1920" height="1080" :fullScreen="true" :boxStyle="boxStyle"><div></div>
</v-scale-screen>