Vue.cli3 PC端px自适应转换rem

1.安装第三方flexible库

npm install lib-flexible

2.在main.js里引入lib-flexible

一定要引入，不然不行
import 'lib-flexible

3.配置meta标签，在index.html文件当中（看看是否有没有，有了就不要写了）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.安装px2rem工具

npm install px2rem-loader

5.配置vue.config.js，如果没有那就自己创建一个vue.config.js文件夹

module.exports = {
  chainWebpack: config => {
    config.module
        .rule('less') //如果你用的是sass就写sass，我用的是less所以就写less
        .oneOf('vue')
        .use('px2rem-loader')
        .loader('px2rem-loader')
        .before('postcss-loader') // this makes it work.
        .options({ remUnit: 192, remPrecision: 8 }) // remUnit: 192代表以1920px为整体，如果设计稿的尺寸是750px，这里的值为75
        .end()
  	},
}

这时候重启一下就能生效了
6.如果发现尺寸不对有问题的话，打开node_modules文件夹里的lib-flexible文件夹下的flexible.js

width = 540*dpr   替换成   width = width *dpr

然后再重启项目就ok了，撒花撒花

总结：

1.安装两个包
npm install lib-flexible
npm install px2rem-loader
2.mian.js引入
import 'lib-flexible
3.index.html配置meta标签
4.配置vue.config.js