vue h5适配（rem效果）

vue h5适配（rem效果）

npm 下载

cnpm install  px2rem-loader --save

cnpm install postcss

cnpm install amfe-flexible --save

cnpm install --save-dev autoprefixer

main.js中引入

// rem h5 适配
import 'amfe-flexible';

vue.config.js中

 const autoprefixer = require('autoprefixer');
 const pxtorem = require('postcss-pxtorem');
module.exports = {
    css: {
        loaderOptions: {
             postcss: {
                 plugins: [
                   autoprefixer(),
                     pxtorem({
                         rootValue: 192, //基准值(计算公式：设计图宽度/10)，设计图尺寸为750X1134(iPhone6)，基准值为750/10=75
                        propList: ['*']
                    })
                 ]
             }
         }
     },
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        // proxy: {//配置跨域
        //     '/api': {
        //         target: 'http://192.168.11.111:8017/APi/',//这里后台的地址模拟的;应该填写你们真实的后台接口
        //         ws: true,
        //         changOrigin: true,//允许跨域
        //         pathRewrite: {
        //             '^/api': ''//请求的时候使用这个api就可以
        //         }
        //     }
            
        // }
        
    }
    
}