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版本。

相关推荐
知识分享小能手5 分钟前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
林恒smileZAZ12 分钟前
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
前端·计算机外设·css3
云中雾丽20 分钟前
flutter中 NotificationListener 详细使用指南
前端
大杯咖啡20 分钟前
一篇文章搞懂,浏览器强缓存以及协商缓存
前端·javascript
王六岁21 分钟前
# 🐍 前端开发 0 基础学 Python 入门指南: Python 元组和映射类型深入指南
前端·javascript·python
_志哥_23 分钟前
多行文本超出,中间显示省略号的终极方法(适配多语言)
前端·javascript·vue.js
王六岁24 分钟前
# 🐍 前端开发 0 基础学 Python 入门指南:常用的数据类型和列表
前端·javascript·python
1_2_3_26 分钟前
神级JS API,谁用谁好用
前端·javascript
冬至已至28 分钟前
AI 时代的自动化信息获取与整合
前端
我是日安33 分钟前
从零到一打造 Vue3 响应式系统 Day 29 - readonly:数据保护实现
前端·javascript·vue.js