vue项目中使用rem、lib-flexible适配

1.安装所需包

npm install px2rem-loader
npm i -S lib-flexible

2.build/utils.js文件下配置

// build/utils.js文件下配置
exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  //这里新加上这段
  var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75 //默认换算为1rem为75px，可根据原型图修改
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    //这里将原来的替换
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

3.index.html不需要有name=“viewport”的节点，会自动添加

4.main.js 入口文件中引入 import ‘lib-flexible/flexible.js’;

5.使用过程中注意：

在px后面添加/*no*/，不会转化px，会原样输出。 — 一般border需用这个
在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个