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
<template>
  <div class="container">
    <section class="item block1">
      <span>前端攻城狮</span>
    </section>
    <section class="item block2">
      <span>前端攻城狮</span>
    </section>
    <section class="item block3">
      <span>前端攻城狮</span>
    </section>
    <section class="item block4">
      <span>前端攻城狮</span>
    </section>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.container {
  .item {
    width: 192 * 5px; //5rem 用于演示
    height: 100px;
    line-height: 100px;
    text-align: center;
    span {
      font-size: 30px;
    }
  }
  .block1 {background-color: aqua;}
  .block2 {background-color: #0387ec;}
  .block3 {background-color: rgb(211, 214, 23);}
  .block4 {background-color: rgb(77, 19, 236);}
}
</style>

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

 

补充：在整个项目中可能会遇到部分样式不想进行 px 转换成 rem的，那只需要在那行代码后边加上 /*no*/ 即可，如下：

 

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

 

//2020/12/2更新  补充部分代码取消rem转换