vue-cli4配置px2rem做到移动端自适配

一、项目初始化：如果选择手动设置的话，勾选In.package.json如果选择默认安装的话，忽略即可

 二、安装模块

npm install amfe-flexible postcss-px2rem -S

三、找到入口文件main.js里引入amfe-flexible

import "amfe-flexible"

四、以下配置二选一即可：

1、在项目根目录创建vue.config.js文件，并完成以下配置：

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    // 设计稿宽度的1/10，一般为75
                    require('postcss-px2rem')({remUnit: 75}),
                ]
            }
        }
    }
}

2、我们也可以打开package.json，增加以下配置：

"postcss": {
  "plugins": {
    "autoprefixer": {},
    "postcss-px2rem": {
      "remUnit": 75
    }
  }
}

• 配置的remUnit设置为75（设计稿宽度的1/10），表示75px将会转化为1rem。

五、重启项目

npm run serve

追加！

P和p区分

小写英文p 会转换为rem

大写英文P 则不会转换为rem