vue移动端px转rem

环境：vue-cli + webpack + lib-flexible + px2rem-loader

1、安装 lib-flexible

npm install lib-flexible -save

2、main.js中引入lib-flexible

import 'lib-flexible/flexible'

3、在 index.html 中设置好meta放缩比例

4、安装 px2rem-loader

npm install px2rem-loader 

5、配置 px2rem-loader

// 5.1 在build中的utils.js中 将 px2rem-loader 配置到 cssloader中
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5    //   设计稿宽度/10
    }
  }
  
  
//  5.2 在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

vue中px转rem.jpg

6、启动项目 npm run dev

npm run dev

7、注意： vue-cli3.0中需要在vue.config.js中配置 chainWebpack

   chainWebpack: config => {
        config.module
            .rule('scss')
            .oneOf('vue')
            .use('px2rem-loader')
            .loader('px2rem-loader')
            .before('postcss-loader') // this makes it work.
            .options({ remUnit: 750 })
            .end()
    },