Vue-cli3 移动端适配（字体适配固定px转rem）

1.首先需要安装两个插件
postcss-px2rem：将css中 px 编译为 rem，配合js根据不同手机型号计算出dpr的值，修改的viewport 的值和的font-size。
lib-flexible：原理是通过js实时的检测屏幕的大小并改变html标签的字体大小，再结合rem的特性来完成页面的自适应。

npm install lib-flexible（dependencies项目运行时的依赖，程序上线后仍然需要依赖）
npm install postcss-px2rem -D （devDependencies开发阶段的依赖）

一般设计稿是以iphone6（750x1334px）来设计的，所以前端回根据给定的像素来直接编写即可（以上插件以及直接适配了）。

2.因为使用的Vue-cli3，所以需要在其vue.config.js中配置

module.exports = {
  runtimeCompiler: true,
  publicPath: './',  //输出的根路径  默认是/ 如果你的网站是app.com/vue 这更改此配置项
  // 设为false打包时不生成.map文件
  productionSourceMap: false,
  // 这就是你需要配置的CSS
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 37.5,
          }),
        ],
      },
    },
  },
  configureWebpack: {
    resolve: {
      // 配置路径别名
      alias: {
        // "@": "src" 脚手架3.x默认已经配置过了，直接使用这个别名即可
      },
    },
  },
}

其次需要在main.js中引入flexible

import  "lib-flexible/flexible.js"

还需要注意：元素内部样式：style=“font-size:18px” 不适用，建议都在组件的style中编写，全局样式都可以在main中引入。
Tips：打包时注意vue.config.js配置publicPath: ‘./’, 且是hash模式才不会白屏，如果是history模式需要后端配置 详见Vue Router官网配置