准备

由于采用了vite3而不是vue-cli
  
  
  
  
  
  
 ，所以以前的很多兼容方式都不能做             。接下来就看一下vite是怎么做到低版本兼容的问题  
 
  
 
  
 
  
 
  
 
  
 
  
。

工具库

@vitejs/plugin-legacyds

官方唯一指定的兼容工具库 
  
  
  
  
  
  ，使用方式官网都有了

进阶使用

问题例子

虽然有些确实是兼容了低版本 


 


 


 


 


 


 

，但是
 
 
 
 
 
 
，有些工具库利用了些新的特性  
   
   
   
   
   
   ，页面还是报错












。

比如下面这个在低版本手机的报错 

 

 

 

 

 

 
，例子是我们这个框架中

 

 

 

 

 

 

，去掉modernPolyfills:[es.array.flat-map,es.object.values],的兼容性：

[Vue warn]: Unhandled error during execution of watcher callback at <VanConfig> at <App> [Vue warn]: Unhandled error during execution of setup function at <VanConfig> at <App> Uncaught TypeError: Object.values(...).flatMap is not a function\n\t/viteTest/assets/index.44986ed0.js:46:12228\nTypeError: Object.values(...).flatMap is not a function at getSSRHandler (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12228) at A (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12422) at Object.onChanged (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:13520) at x (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12476) at callWithErrorHandling (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:1576) at callWithAsyncErrorHandling (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:1698) at I (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:17067) at doWatch (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:17371) at watch (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:15741) at useColorMode (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12503) [Vue warn]: Unhandled error during execution of watcher callback at <VanConfig> at <App> [Vue warn]: Unhandled error during execution of setup function at <VanConfig> at <App> [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core at <VanConfig> at <App> [Vue Router warn]: uncaught error during route navigation: {} Uncaught (in promise) {"name": "TypeError", "message": "Object.values(...).flatMap is not a function", "stack": "TypeError: Object.values(...).flatMap is not a function\n at getSSRHandler (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12228)\n at A (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12422)\n at Object.onChanged (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:13520)\n at x (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12476)\n at callWithErrorHandling (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:1576)\n at callWithAsyncErrorHandling (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:1698)\n at I (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:17067)\n at doWatch (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:17371)\n at watch (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:15741)\n at useColorMode (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12503)"} Unhandled promise rejection {}

解决思路

语法不支持

Object.values(...).flatMap is not a function

我们就可以从中推断出             ，肯定是某个库 
 

 
 

 
 

 
 

 
 

 
 

 
 ，用了高级语法













，然后低版本没兼容
  
  
  
  
  
  
 。因为在es6以上flatMap
  
  
  
  
  
  
 、Object.values都是支持的                   ，但是我们目前不知道哪个有  
  
  
  
  
  
 。

具体哪个使用了哪个库不支持

然后又根据

[Vue warn]: Unhandled error during execution of watcher callback at <VanConfig> at <App>

可以确认 
 
 
 
 
 
 
 
 
 
 
 
 
 ，就是我们自己些的VanConfig组件有某个库不被支持了

然后我们点进去



















，这个库其实就只是应用到了vueUse中的useDark
 


 


 


 


 


 


 
。

我们查历史可以得知             ，在安卓6左右 
 
  
 
  
 
  
 
  
 
  
 
  
 ，是没有暗黑模式这个概念的
 
 
 
 
 
 
。我们把这个useDark组件去掉












，再打包   
   
   
   
   
   
  。重新打开
  
  
  
  
  
  
 ，我们就确实能够在低版本手机中看到了

兼容语法

但是把某个库或者某个功能去掉 
  
  
  
  
  
  ，肯定是下下策 


 


 


 


 


 


 

，最好还是能够语法兼容
 

 

 

 

 

 

 
。

查阅文档
 
 
 
 
 
 
，其中有2个专门将高级语法转换的  
   
   
   
   
   
   ，是polyfills和modernPolyfills

 

 

 

 

 

 
。根据文档 

 

 

 

 

 

 
，我们可以得知

 

 

 

 

 

 

，手动将高级语法转换的方式是这样

import legacy from @vitejs/plugin-legacy export default { plugins: [ legacy({ polyfills: [es.promise.finally, es/map, es/set], modernPolyfills: [es.promise.finally] }) ] }

但文档写得不是很好             ，没有具体说明polyfills和modernPolyfills的关系 
 

 
 

 
 

 
 

 
 

 
 

 
 ，我还是建议2个都写得一样              。

具体有哪些可以设置的值













，就是这2个仓库的值 https://unpkg.com/browse/core-js@3.26.0/ https://github.com/zloirock/core-js/tree/master/packages/core-js

根据报错                   ，是少了es.array.flat-map和es.object.values 
 
 
 
 
 
 
 
 
 
 
 
 
 ，加上去

legacy({ //babel



















，兼容老浏览器             ，但是体积会大80% // targets: [defaults, not IE 11] targets: [chrome 52], additionalLegacyPolyfills: [regenerator-runtime/runtime], renderLegacyChunks: true, modernPolyfills:[ es.array.flat-map, es.object.values ], polyfills: [ es.object.values, es.array.flat-map ] })