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 // 設置要替換的最小像素值。
    }
  }
}