需要用到的插件

1、npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小,此处也可安装lib-flexible插件,在我自己的项目里安装这两个插件区别不大
2、npm install postcss-px2rem-exclude --save //开发中有很多文章推荐安装postcss-px2rem,安装之后发现移入的第三方组件库(比如element-ui)的px也被转换成rem,如果想要忽略转换的话需要用到exclude

在main.js文件里引入lib-flexible-computer 在这里插入图片描述
在vue.config.js文件里加入以下代码

 css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require("postcss-px2rem-exclude")({
            remUnit:192,//这是rem适配的配置 注意:remUnit在这里要根据lib-flexible的规则来配制,如果您的设计稿是1920px的,用设计稿宽度/10
            exclude:/node_modules|element-ui/ //此目录下的文件中的px不会被转换为rem
          })
        
        ]
      }
    }
  }

最后npm run dev启动项目(有的项目可能是npm run serve)

Logo

前往低代码交流专区

更多推荐