如何在PC端项目中，嵌入H5页面（vue移动端适配）持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天

背景

一直以来我都负责写公司基于vue的web pc端的代码，但是最近的某个项目，公司要求出几个移动端页面。起初大家想的是直接弄一个app，但是很快就被否定了，于是决定在pc端嵌入H5页面。那么pc端中嵌入h5页面会存在哪些问题呢？

第一：UI框架的适配问题

element-ui是无法很好的适配移动端的，于是我第一时间想到的是vantUI，由于只有几个页面，所以为了不必要的引入，我采取的所有组件局部导入，vantUI配置

下载

npm i vant@latest-v2 -S

引入vant样式（main.js）

import 'vant/lib/index.css';

局部导入组件

// 使用
<van-field/>
// 导入
import {Form, Field, CellGroup,Button,Notify,Popup} from 'vant'
// 注册
components:{
    lanSelect,
    [Form.name]:Form,
    [Field.name]:Field,
    [CellGroup.name]:CellGroup,
    [Button.name]:Button,
    [Popup.name]:Popup,
    [Notify.Component.name]: Notify.Component,
  },

第二：移动端适配

以前也开发过移动端项目，当时采取的适配方案是lib-flexible+postcss-px2rem方案，但是结合现在的项目来看是不合适的，因为现在这个项目H5页面只是嵌入页面，98%的页面还是pc端页面。于是我就想，有没有可以有什么方案是可以既可以自动换算单位，又可以只换算指定的那几个页面的方案。只能说踏破铁鞋无觅处，得来全不费功夫。

贴上我的postcss.config.js

const path = require('path');

module.exports = ({ webpack }) => {
  const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
      "postcss-px-to-viewport": {
        unitToConvert: "px", // 要转化的单位
        viewportWidth: 375, // UI设计稿的宽度
        unitPrecision: 6, // 转换后的精度，即小数点位数
        propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: [], // 指定不转换为视窗单位的类名，
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
        exclude: [/views/,/node_modules/,/components/,/public/,/api/,/assets/,/filters/,/router/,/service/,/store/,/App.vue/], // 设置忽略文件，用正则做目录名匹配
        landscape: false, // 是否处理横屏情况
        // include: [/mobile/], // 只对/src/views/mobile下的文件做转换
      }
    }
  }
}