方式一

该方式只需我们在写样式时，按照uI稿的单位进行书写就 OK 了。
webpack 在编译时候会自动把我们的 px 转换为 rem .
通过 lib-flexible 和 px2rem-loader 来实现配置。

1.安装：

  1. npm i lib-flexible
  2. npm i px2rem-loader

2.引入

直接在main.js中引入

  1. import 'lib-flexible/flexible';

3.配置

我是在 vue.config.js 中 配置的，因为使用的是 vue-cil 脚手架

  1. module.exports = {
  2.   outputDir: 'kaoyan',
  3.   chainWebpack: (config) => {
  4.     // 配置rem布局
  5.     config.module
  6.       .rule('scss')
  7.       .test(/\.scss$/)
  8.       .oneOf('vue')
  9.       .use('px2rem-loader')
  10.       .loader('px2rem-loader')
  11.       .before('postcss-loader') // this makes it work.
  12.       .options({ remUnit: 37.5, remPrecision: 8 })
  13.       .end();
  14.   },
  15.   css: {
  16.     loaderOptions: {
  17.       sass: {
  18.         // additionalData 变为 data 会保存
  19.         additionalData: `
  20.         @import "~@/style/variables.scss";
  21.         @import "~@/style/mixin.scss";
  22.             `,
  23.       },
  24.     },
  25.   },
  26. };

方式二

该方式则是通过直接书写 css 样式时，就进行了 rem 计算并书写, 具体做法如下。
安装和引入 lib-flexible 同上方式一，不用安装 px2rem-loader。
在书写时候，我们可以通过开发工具来帮助我们计算，书写时候直接写rem就OK。