背景

新公司新框架，第一次搭建h5多页应用的框架，遇到好多小问题，以前没注意没深究的点，在此记录一下

框架

框架采用的 vite+vue3+ts+pinia+scss 搭建的，具体搭建过程我就不献丑了，好多大佬已经分享过，我目前的框架也是多个大佬分享的拼拼凑凑，脚手架在www.npmjs.com/package/vue… 这里，安装

npm i vue3-mpa-cli

创建项目：

 circle create 项目名

框架的代码仓库：github.com/circlewang/… 目前还在填坑中，欢迎大家提问题，让我继续填坑

要是帮助到你的话，不要忘记帮我点个小心心

问题总结

问题一：框架搭建过程中遇到的问题汇总

自动导入问题

因为我希望页面的请求地址是类似：localhost:**/pageOne/，然后就将root设置了“ root: './src/pages/'”。

导致的问题就是，在我设置自动导入自定义组件的时候，一直找不到我的组件，会报“[unplugin-vue-components] no components found”这个错误。因为入口改变了，找不到“src/components”这个目录，最终修改为：

      Components({
        dirs: ['../components/'],
        extensions: ['vue', 'md'],
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        dts: '../components.d.ts'
      }),

我的页面目录为：

问题二：设置h5页面标题

动态设置当前h5页面的标题，代码如下：

//页面导航条
export const setNavigationBarTitle = (title: string) => {
  document.title = title
  const iframe = document.createElement('iframe')
  document.body.appendChild(iframe)
  iframe.onload = function () {
    setTimeout(function () {
      document.body.removeChild(iframe)
    }, 0)
  }
  console.log(document.title, '-----')
}

问题三：将内联样式也可以转成rem适配

我的项目的UI稿是750，所以在vite.config.ts的配置也是以750为基点，配置如下：

    css: {
      ...,
      postcss: {
        plugins: [
          // px换算成rem
          PxToRem({
            rootValue: 75, // 换算的基数(设计图750的根字体为32)
            selectorBlackList: ['van-'], // 忽略转换正则匹配项
            propList: ['*'],
            unitPrecision: 3,
            unitToConvert: 'px' // (String) 要转换的单位，默认是 px。
          })
        ]
      }
    },

//将内联样式自动转rem适配
export const px2rem = (px: any) => {
  if (/%/gi.test(px)) {
    // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
    return px
  } else {
    return parseFloat(px) / 75 + 'rem'
  }
}

//使用：px2rem(width+'px')

问题四：eslint+prettierrc

按照一些搭建教程复制下来的代码，实际运行过程中，可能会出现一个报错，看起来很像eslint和prettierrc打架了，修复的方法是增加一个注释：

//eslint-disable-next-line prettier/prettier

针对上面的报错，我既不希望加这行代码，又不希望他一直出现这种提示，粗暴解决：将.eslintrc.cjs中“prettier/prettier”改为“off”

...
rules:[
    ...
    'prettier/prettier':'off',
    ]
...

还有 我自己看着难受 的地方（不抬杠），代码中每个属性都会变成一行，小小的一个div，就会变得很长，比如：

将..prettierrc.cjs的“singleAttributePerLine”改为“false”,就会变成如下这种

开发的问题总结

当前h5框架是嵌入到钉钉的微应用，不用我多说，对接过的人都深有体会，会持续总结发现问题。

问题一：ios流畅展示，android白屏

我的框架是vite+vue3+ts,这个问题是我从晚上八点发现问题，到2点解决，真的很让人崩溃。

用的是钉钉的网页模拟器

选了android机型之后，会发现什么报错都没有，干干净净，dd.ready()也不执行，而真机的android白屏，也没有调试按钮，一开始以为是他的jsapi需要什么android的权限，也对比了ios，没有找到问题。

后来尝试在index.html中添加文字，发现是可以出来的，但是在App.vue中只写了一个“222”都没有出来，这时候就思考是不是打包出来的东西，钉钉浏览器识别不了，导致不识别"createApp(App).mount('#app')"。

废话不多说，直接上解决办法,具体问题应该安卓钉钉内置浏览器的原因，版本太低了

 npm i @vitejs/plugin-legacy -S -D

在vite.config.ts中增加如下代码

import legacy from '@vitejs/plugin-legacy'


 plugins: [
      vue(),
      legacy({
        targets: ['chrome 52'],  // 需要兼容的目标列表，可以设置多个
        additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
      }),
      ...
 ]

根据以上进行打包后可能还会有个报错，这时需要再安装

npm i terser

就ok啦

问题还在发现，总结一直在路上，希望可以帮助到你，嘻嘻

搭建、完善框架中遇到的小问题

背景

框架