vue.config.js配置 移动端配置自适应rem响应

移动端配置自适应rem响应

必须的npm包：postcss-pxtorem、lib-flexible

可以安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install postcss-pxtorem --save-dev 或者 cnpm install postcss-pxtorem -D
cnpm install lib-flexible --save

0.目录结构 

 

第一种配置：vue.config.js

module.exports = {
  //编译打包存放的目录默认dist
  outputDir: 'dist',

  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: false,

  // 设为false打包时不生成.map文件
  productionSourceMap: false,

  assetsDir: 'static',
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          // 补全css前缀(解决兼容性)
          require("autoprefixer")(),
          // 把px单位换算成rem单位
          require("postcss-pxtorem")({
            rootValue: 32, // 换算的基数(设计图750的根字体为32)
            selectorBlackList: [".van", ".my-van"],// 要忽略的选择器并保留为px。
            propList: ["*"], //可以从px更改为rem的属性。
            minPixelValue: 2 // 设置要替换的最小像素值。
          })
        ]
      }
    }
  },

  devServer: {
    port: 8080,
    // proxy: {/**处理跨域，本地代理转发*/
    //     '/internal': {
    //         target: 'http://192.168.2.75:9501/',  // 接口域名
    //         secure: false,  // 如果是https接口，需要配置这个参数
    //         changeOrigin: true,  //是否跨域}
    //     },
    // },
  }
}

第二种配置：package.json

{
  "name": "projectName",
  "version": "0.1.0",
    "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 32,
        "selectorBlackList": [".van",".my-van"],
        "propList": ["*"],
        "minPixelValue": 2
      }
    }
  },

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8",
  "ios >= 8",
  "android >= 4.0"
]

}

第三种配置：postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem":{
            rootValue: 32, // 换算的基数(设计图750的根字体为32)
            selectorBlackList: [".van", ".my-van"],// 要忽略的选择器并保留为px。
            propList: ["*"], //可以从px更改为rem的属性。
            minPixelValue: 2 // 设置要替换的最小像素值。
    }
  }
}