vue项目适配PC端及移动端页面

需要用到的插件

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)