移动端适配

安装 amfe-flexible 

npm install amfe-flexible -S
 

安装 px2rem-loader 

npm install postcss-pxtorem@5.0.0 -D
 

在mian.js中引入

 "px2rem-loader": "^0.1.9",

 "amfe-flexible": "^2.2.1",

import 'amfe-flexible/index.js'
scr/libs/ren.ts
function setRem() {
  // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
  const htmlWidth: number =
    document.documentElement.clientWidth || document.body.clientWidth;
  // 得到html的Dom元素
  const htmlDom: HTMLHtmlElement = document.getElementsByTagName("html")[0];
  // 设置根元素字体大小
  const clientWidth: number = document.body.clientWidth;
  // 1920设计稿一套样式，750设计稿一套样式
  //   htmlDom.style.fontSize = clientWidth < 1500 ? clientWidth < 1100 ? htmlWidth / 56 + 'px' : htmlWidth / 81 + 'px' : htmlWidth / 112 + 'px'
  htmlDom.style.fontSize =
    clientWidth < 794
      ? htmlWidth / 50 + "px"
      : htmlWidth / (clientWidth / 16) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem();
};

配置vue.config
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          // eslint-disable-next-line @typescript-eslint/no-var-requires
          require('postcss-pxtorem')({
            // 把px单位换算成rem单位
            rootValue: 16, // 换算的基数(设计图750的根字体为75)37.5
            // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
          })
        ]
      }
    }
  },
  lintOnSave: false,
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  publicPath: process.env.BASE_URL,
  devServer: {
    open: true,
    host: '0.0.0.0',
    port: 5000,
    hotOnly: false,
    proxy: {
      api: {
        // 服务器端接口地址
        target: process.env.VUE_APP_BASE_API,
        //
        ws: true,
        // 是否跨域
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}