// 基準大小
const baseSize = 32
// 設置 rem 函數
function setRem () {
  // 當前頁面寬度相對于 750 寬的縮放比例，可根據自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 設置頁面根節點字體大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + "px"
}
// 初始化
setRem()
// 改變窗口大小時重新設置rem
window.onresize = function () {
  setRem()
}

import "./utils/rem"

npm install postcss-pxtorem -D

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": {
      "rootValue": 32,
      "propList": ["*"]
    }
  }
}

module.exports = { 
  //雙擊index.html文件直接運行
  publicPath: "./",
  // 當運行 vue-cli-service build 時生成的生產環境構建文件的目錄
  outputDir: "dist",
  lintOnSave: true,
  // 是否使用包含運行時編譯器的 Vue 構建版本。設置true后你就可以在使用template
  runtimeCompiler: true,
  // 生產環境是否生成 sourceMap 文件 sourceMap的詳解請看末尾
  productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") { // 為生產環境修改配置...
      return {

      }
    } else {
      return {

      }
    }
  },
  css: {
    extract: true, // 開啟 CSS source maps?
    sourceMap: false, // css預設器配置項
    modules: false,
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            rootValue: 37.5, // 換算的基數
            selectorBlackList: ["weui", "mu"], // 忽略轉換正則匹配項
            propList: ["*"]
          })
        ]
      }
    }
  },

  // webpack-dev-server 相關配置
  devServer: { // 設置代理
    hot: true, // 熱加載
    host: "0.0.0.0", // ip地址
    port: 8082, // 端口
    https: false, // false關閉https，true為開啟
    open: true, // 自動打開瀏覽器
    overlay: {
      warnings: false,
      errors: false
    }
  }
}