vue-cli3.0 移动端px转换rem方法

vue-cli3.0 移动端px转换rem方法

创建好项目
以下安装建议使用淘宝 NPM 镜像，下载速度快、成功率高。
淘宝 NPM 镜像地址
直接安装淘宝 NPM 镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org

第一步：下载 amfe-flexible
cnpm install amfe-flexible -S

第二步：在main.js里引入amfe-flexible

//移动端rem适配
import 'amfe-flexible/index' 

第三步：下载postcss-pxtorem
cnpm install postcss-pxtorem -D

第四步：在项目根目录下新建vue.config.js，并配置postcss-pxtorem

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px单位换算成rem单位
                        rootValue: 75, // 换算的基数(设计图750的根字体为75)
                        // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ['*']
                    })
                ]
            }
        }
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            // 为开发环境修改配置...
        }
    }
}

第五步：重启项目，每次修改完vue.config.js都要重启项目。