Vue3解决屏幕适配问题

最新推荐文章于 2024-07-22 10:34:10 发布

来日可期啊

最新推荐文章于 2024-07-22 10:34:10 发布

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/weixin_42599077/article/details/126527754

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

1、安装
npm install px2rem-loader -D
npm install lib-flexible -S

2、在项目入口文件 main.js 里引入 lib-flexible

import ‘lib-flexible’

vue-cli3 因为减少了对于 webpack 的配置，因此有些文件就被隐藏起来了。可以在文件的根目录下 vue.config.js 文件增加或修改一些 webpack 配置。

首先添加一个新的 Loader，vue-cli 的文档中也写的非常清楚了，需要在文件中添加以下代码

module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        port: 6066,
        // host: "localhost",
        open: true,
    },
    //适配部分如下
    chainWebpack: (config) => {
        config.module
            .rule("css")
            .test(/\.css$/)
            .oneOf("vue")
            .resourceQuery(/\?vue/)
            .use("px2rem")
            .loader("px2rem-loader")
            .options({ remUnit: 192 })
            .end();
    },
});

修改flexible.js（重要，不然没效果）

function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          //  width = 540 * dpr;   就是这里的问题，需要将 540 修改为 width，不将宽度写死就ok了。
          width = width * dpr;
      }
      var rem = width / 10;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }

打开的界面都关闭重新run