vue移动端适配

vant移动端适配

1.安装淘宝团队开发的flexble

npm i amfe-flexble -S
npm i postcss-pxtorem

2.在main.js引用

import 'amfe-flexible'
import 'postcss-pxtorem'

3.在vue.config.js

const autoprefixer = require("autoprefixer")
const pxtorem = require("postcss-pxtorem");
const path = require("path");

const themePath = path.resolve(__dirname, "src/assets/style/theme.less");

module.exports = {
  // 关闭eslint检查
  lintOnSave: false,
  // 配置css前缀,px转rem
  css: {
    loaderOptions: {

      // vant换主题
      less: {
        modifyVars: {
          hack: `true; @import "${themePath}";`
        }
      },
        // 后处理器配置
      postcss: {
        plugins: [
          // 配置样式前缀
          autoprefixer(),
          // 把px转为rem
          pxtorem({
            rootValue: 37.5,
            propList: ["*"]
          })
        ]
      }
    }
  },

  configureWebpack: {
    externals: {
      axios: "axios" // 配置使用CDN
    }
  }
};

4.在head标签引用视口

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">