vue项目利用px2rem适配不同屏幕

项目创建好之后，实现步骤：

1、使用命令插入插件：npm install px2rem-loader

2配置util.js文件

exports.cssLoaders中添加

var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 100
  }
}

引用

const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

3、index.html文件配置

window.onresize = function () {
  rem();
}
window.onload = function () {
  rem();
}
function rem() {
  let whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
  let html = document.documentElement;
  let wW = html.clientWidth;// 窗口宽度
  console.log(wW)
  let rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
  document.documentElement.style.fontSize = rem + 'px';
  document.body.style.fontSize = '16px';
}

4、css文件直接使用px设置就好

注意：设置成功之后依旧不起作用怎么办？检查css引入方式，我自己直接使用link标签在index.html文件中直接引入css，发现设置的没有起作用，检查发现css引入方式不正确！
正确的引入方式应该在main.js中引入css:

require('@/assets/css/common.css')
require('../static/css/index.css')
css文件放在何处无所谓.