Vue项目打包后整体页面缩小的坑

这两天发现一个特别奇怪的问题,做好的Vue项目打包后页面整体都缩小了,然后去度娘上搜索解决方案,但是上面都是页面放大或者防止页面缩小放大的解决方案,好不容易搜到有类似的标题,但是没有解决方案,百思不得其解,各种方法都试过了,都无济于事,不知道你们是否有遇到过这样的问题?

后来,我想着将打包后的页面放大看看,结果一打开就发现问题所在了,打包后的页面是按100%来显示的,而打开的本地项目页面是按125%来显示的,原因是Window系统默认布局大小是按照125%来显示的,如下图所示,所以没有手动将页面缩放到正常的100%的时候,页面会默认按照125%显示。对于这块设置正常的小伙伴,还有可能的原因就是浏览器设置了页面缩放或者自己一开始不小心按了页面放大后来没有调回正常的100%,也会出现这样的问题,所以写代码的时候整体都设置小了。

Vue项目打包后整体页面缩小的坑

解决方法就很简单了,把页面缩放到正常的100%,代码大小按比例调大即可

不希望别人走过和我同样的坑,所以写下了这篇文章,如果你也遇到这样的问题,希望能帮到你~