pc端使用rem进行适配 （vu-cli3/4+lib-flexible+postcss-pxtorem）

1、使用vue-cli3 创建好项目 

 vue create responsive-website-template

2、安装lib-flexible依赖

npm install lib-flexible -S

3、安装 postcss-pxtorem依赖

npm install postcss-pxtorem -D

 

4、在main.js引入 lib-flexible

import 'lib-flexible/flexible'

5、找到目录 ：node_modules/lib-flexible/flexible.js ，修改flexible.js； （不要直接搜索，搜不到的）

修改后：

修改原因：flexible原本是用于移动端适配的，所以他这里限制了最大屏幕宽度为540，我们要用于pc端，就需要吧这里最大宽度限制改掉。

6、在package.json同级下新建 vue.config.js 文件

//vue.config.js

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : '',
    productionSourceMap: false,

    //postcss-pxtorem
    css: {
        loaderOptions: {
          postcss: {
            plugins: [
              autoprefixer(),
              pxtorem({
                rootValue: 192, //设计稿宽度为1920px的
                propList: ['*']
              })
            ]
          }
        }
      },
}

经过上面的步骤就全部配置好了，接下来验证一下

//index.vue

可以看到，效果实现啦！（撒fafa） 

 

ps：项目开始之前进行技术调研，看了很多博客，踩坑踩的有点狠，经过各种实践之后，写篇博客简单记录下配置过程。