vite3+vue3+naiveUI在chorme49低版本中遇到的兼容问题【附解决方法】

550 阅读2分钟

1. grid布局在低版本中不支持,将grid布局样式替换为flex布局

image.png

2. n-data-table在低版本下列的fixed属性不生效(图中的"操作"与"考试状态"列被赋予了fixed:right属性)且有样式混乱问题

a4428ebe0f9d24a56f8ae0ed1ee38f0.png

解决方法:在低版本下将fixed列转换为普通列 image.png

3. 原生ResizeObserver在低版本中不支持,可替换为补丁包 resize-observer-polyfill

image.png

image.png

4. 在封装本地svg-icon组件中,原来使用的是href属性来链接图标地址,结果在低版本下没有显示成功,原因是href在低版本下不支持

0181d28552f1f2d3cf71104729fe2b1.png image.png

解决办法:将href替换为xlink:href image.png

5. input文本框placeholder重叠,原因为n-input会在原生input中添加placeholder属性,同时生成同级的.n-input__placeholder盒子来展示placeholder,并且两者的line-height不一致导致低版本下两份文本重叠

image.png

解决方法:增加全局样式,将.n-input__input-el的行高调成与.n-input__placeholder盒子一样

image.png

6. n-back-top在低版本里正常显示但点击回到顶部事件无法正常执行,原因是低版本不支持scrollTo方法

image.png 解决方法:对n-back-top组件进行二次封装,根据是否为低版本来判断是否显示

image.png

7. Event.composedPath在低版本中不支持,导致表格横向与竖向滚轮滚动不了与控制台报错

image.png image.png

解决办法,在index.html入口模板的script逻辑的最前面添加代码补丁:

if (!Event.prototype.composedPath) {
        Event.prototype.composedPath = function () {
          if (this.path) {
            return this.path
          }
          var target = this.target
          var path = []
          while (target.parentNode !== null) {
            path.push(target)
            target = target.parentNode
          }
          path.push(document, window)
          return path
        }
      }

优化一:按需加载icon-park

原因:vite目前不支持按需导入icon-park,打包后请求页面时会请求全量的icon-park文件,导致首页加载体积过大,解决方法:在正式环境下通过import.meta.glob全量扫描icon图标文件、Vue defineAsyncComponent+import()动态注册组件方式,打包时将每个icon图标文件进行单独打包,运行时Vue将动态注册所有icon组件,只有在当前页面使用了某个图标时才进行请求图标文件。

代码如下:

  • 按需加载方法: image.png
  • main.ts中注册

image.png