Qt 嵌入Vue项目 flapMap 浏览器兼容性问题

最近有个需求,Qt工程需要嵌入vue项目,本来是很简单的事情。在我的PC上启动Vue项目,同事PC上用浏览器通过IP地址可以正常加载vue项目,但用Qt嵌入总是失败。问题定位步骤如下:

1)换了一个简单的vue项目,发现没有问题,Qt工程能正常加载vue项目

2)由于Qt不像浏览器那样可以console,或断点定位,所以采用加alert 的方法来定位,最后定位到调用flatMap方法的地方有问题。flapMap是es6语法,猜测是由于Qt自集成的chrome版本低导致,所以升级Qt版本到6, 问题解决。

3)由于整个项目是在Qt 低版本开发的,不想采用升级Qt版本来解决。所以修改vue项目来解决。

Vue项目Babel 会把es6语法polyfill 呀, 怎么对flatMap没起作用?

看了一下vue项目根目录下的.browserslistrc 文件, 并没有对chrome版本进行设置,故增加一行代码解决:Chrome > 55

4).browserslistrc 解读

Browserslist 帮助我们在浏览器兼容性和包大小之间保持适当的平衡。使用 Browserslist,可以做到覆盖更广泛的受众(浏览器),同时包的体积也会保持最小化。

在vue项目根目录运行npx browserslist 可以查看支持的浏览器。

Autoprefixer、babel-preset-env 等前端工具会使用.browserslist配置来生成适当的CSS和JavaScript代码。

5)通过前面分析得出问题根本原因。vue项目采用.browserslistrc默认配置,没有限定chrome浏览器版本,babel转换后生成的js代码需要的浏览器版本高于Qt自集成的chrome版本。

相关推荐
她说人狗殊途2 小时前
基于 vue-cli 创建
前端·javascript·vue.js
AZaLEan__3 小时前
前端移动端适配与 Bootstrap
前端·bootstrap·html
大家的林语冰3 小时前
Deno 2.8 正式发布,再次超越 Bun,史上最大的次版本升级诞生!
前端·javascript·node.js
渣渣xiong3 小时前
从零开始:前端转型AI agent直到就业第五十七天-第五十八天
前端·人工智能·python
AI周红伟3 小时前
周红伟:长鑫科技(CXMT)财务全景分析
前端·chrome·科技
excel4 小时前
JS 正则在多次 test() 时为什么会出现 lastIndex 缓存问题?
前端
IT_陈寒4 小时前
为什么 Java 的 Optional 让我调试到深夜?
前端·人工智能·后端
米丘4 小时前
React 19.x 的 lazy 与 Suspense
前端·javascript·react.js
如果超人不会飞4 小时前
TinyVue Grid 表格 fetchData 完全指南:从入门到精通
前端
kyriewen5 小时前
手写虚拟DOM后,我反问面试官:key为什么不能用index?
前端·react.js·面试