移动端适配

// amfe-flexible.js
import utils from "./Utils";
(function flexible(window, document) {
  var docEl = document.documentElement;
  //屏幕像素比
  var dpr = window.devicePixelRatio || 1;
  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();
  // set 1rem = viewWidth / 10
  function setRemUnit() {
    console.log("flexible setRemUnit ", utils.getDeviceOs());
    var rem;
    // 获取当前设备类型
    // isTablet为true 为pad 设备
    if (utils.getDeviceOs().isTablet) {
      // 判断横屏竖屏
      rem = utils.isOrientation() ? (docEl.clientWidth / 800) * 36 : (docEl.clientWidth / 423) * 36;
    } else {
      // 根据屏幕宽度判断为折叠屏和手机 合理性待检验！
      rem = window.screen.width > 500 ? (docEl.clientWidth / 677) * 36 : docEl.clientWidth / 10;
    }
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function (e) {
    //判断是否后退进入
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

// main.js
import "./utils/amfe-flexible.js";

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");

// vue.config.js
// console.log(process.env);
const path = require("path");
const resolve = (dir) => {
  return path.join(__dirname, dir);
};
module.exports = {
  publicPath: "./", //解决打包上线时，文件路径变为绝对路径，显示空白
  assetsDir: "static",
  outputDir: "h5_001",
  productionSourceMap: false,
  devServer: {
    overlay: {
      warnings: false,
      errors: false
    }
  },

  chainWebpack: (config) => {
    config.output.filename("static/js/[name].[hash].js").end();
    config.devServer.disableHostCheck(true);
    //修改webpack打包的入口文件。需要在根目录建两个对应入口js文件
    config
      .entry("app")
      .clear()
      .add(`./src/pages/main.js`);
  },
  css: {
    extract: process.env.NODE_ENV === "production",
    sourceMap: false,
    requireModuleExtension: true,
    loaderOptions: {
      less: {
        // 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            // hack: `true; @import "~@/assets/style/coverVant.less";`,
          },
        },
      },
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            //配置项，详见官方文档
            rootValue: 36,
            propList: ["*"],
            minPixelValue: 12,
            unitPrecision: 6,
          }), // 换算的基数
        ],
      },
    },
  },
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [resolve("./src/assets/style/theme-device.less")],
    },
  },
  // eslint-disable-next-line prettier/prettier
};