QT 5.12用QWebEngineView加载vue页面提示globalThis is not defined

最新推荐文章于 2024-08-16 12:49:08 发布
原创 最新推荐文章于 2024-08-16 12:49:08 发布 · 911 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

 "Uncaught ReferenceError: globalThis is not defined", source: http://127.0.0.1:5173/@vite/client (391)

经查发现，浏览器chrome内核版本为：69.0.3497.113

查询网址：浏览器内核版本检测--浏览迷

本人不想更换开发工具。主要想兼容win7.

可以在vue代码中的index.html页面加上

  <script>
    this.globalThis || (this.globalThis = this)
  </script>

就可以了。vite版本如下：

karl122
关注
vue3报错Vue is not defined
2401_89806660的博客
06-25 435
【代码】vue3报错Vue is not defined。
Qt加载QWebEngineView和js交互
weilp
12-24 5127
编译环境为(win10)，Qt版本5.5.1, VS2013(建议用更高版本，); 因为要用到chrom浏览器加载网页，偶然得知Qt5之后竟然集成了chromium；测试验证技术是否可用，目前除了http音频无法播放，CPP和JS交互，包括网页调试，已完全OK；顺便吐槽一下“百度”，搜的都是一样，多少都少点东西，不是缺 qwebchannel.js 就是少了jquery-3.1.1...
Qt + vue.zip
09-12
本文资源是利用Qt5+vue实现一个windows桌面应用程序，采用QWebEngineView加载html页面，QWebChannel和QThred实现和html页面异步交互
Qt+vue开发桌面应用程序（一）Qt部分介绍
丁爸的博客
09-12 2万+
本文介绍Qt+vue实现一个windows桌面应用程序，效果图如下： 全文分Qt部分和Vue部分两章，本文先介绍Qt部分 1.1. 涉及Qt模块： 注意：Qt版本5.15，编译器要选MSVC xxxx（本文选：MSVC2019 64bit）。Qt web相关模块在windows系统不支持MinGw编译器。 QWebEngineView：加载和显示html页面 QWebChannel：负责html和Qt交互 QWidget：显示窗口页面 QThread：创建线程异步处理页面请求 QJson…：json数据
vite + vue项目报错：Uncaught ReferenceError: globalThis is not defined
AwoCT的博客
04-02 2414
vite + vue项目报错：`Uncaught ReferenceError: globalThis is not defined`。
前端页面空白，报错Uncaught ReferenceError: globalThis is not defined
热门推荐
初夏0811的博客
04-05 2万+
globalThis旨在通过定义一个标准的全局属性来整合日益分散的访问全局对象的方法。该提案目前处于第四阶段，这意味着它已经准备好被纳入ES2020标准。所有流行的浏览器，包括Chrome 71+、Firefox 65+和Safari 12.1+，都已经支持这项功能。你也可以在Node.js 12+中使用它。首先和网上说的一样，看自己的node版本是否>12，若是大于则，注意 浏览器版本是否最新，更新浏览器版本至最新试试：（已解决）
解决 Vue3.0 globalThis is note defined
wang306033的博客
05-31 3570
问题引发原因: 浏览器不支持 es2020 以下兼容性表 解决方式: 0.0 其实吧,老兄,别折腾了,赶紧升级浏览器吧 升级浏览器版本 以支持 es2020 临时方案 在html头部加上如下代码： <head> <script> this.globalThis || (this.globalThis = this) </script> </head> 其他场景 : vite打包 vue3.0 修改vite.config.js 添加插件@v.
钉钉h5应用 globalthis is not defined vite client
qubes的专栏
03-05 758
钉钉h5应用 globalthis is not defined vite client。
精选资源
解决vue项目报错webpackJsonp is not defined问题
01-19
在vue单页面应用中，我们大概都会使用CommonsChunkPlugin这个插件。 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题，打包上线后却会报错 webpackJsonp is not defined。这是因为公共文件必须在自己...
VUE使用‘luckysheet‘ is not defined已解决，其他博主方法没有解决请看这里
06-26
如果你遇到了"luckysheet is not defined"的错误，这通常意味着在你的Vue项目中，Luckysheet未正确安装或引入。下面我们将详细探讨这个问题的解决方案以及如何在Vue项目中有效地使用Luckysheet。 首先，让我们了解...
qt实现web服务器加载vue应用进行C++和html混合编程-连载【6】源码
09-03
qt实现web服务器加载vue应用进行C++和html混合编程-连载【6】-企业级系统开发实战连载系列 -技术栈(vue、element-ui、qt、c++、sqlite)
react,vue报 globalthis is not defined
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
01-17 2万+
globalthis is not defined
【已解决】Uncaught ReferenceError: globalThis is not defined
originalzzZ的博客
01-12 1万+
首先和网上说的一样，看自己的node版本是否>12，若是大于 则， globalThis旨在通过定义一个标准的全局属性来整合日益分散的访问全局对象的方法。该提案目前处于第四阶段，这意味着它已经准备好被纳入ES2020标准。所有流行的浏览器，包括Chrome 71+、Firefox 65+和Safari 12.1+，都已经支持这项功能。你也可以在Node.js 12+中使用它。 注意 浏览器版本 因为我的版本是： 所以一直报错。 希望对你有所帮助， 原因来自：什么是 glob...
解决浏览器端 globalThis is not defined 报错
m0_50207524的博客
02-03 3664
在使用低版本火狐浏览器出现报错globalThis is not defined。
前端vue项目，用idea npm start报错Syntax Error: ReferenceError: globalThis is not defined，解决方法
m0_50623553的博客
08-16 1263
经过资料查询，发现可能是node.js版本过低，之前微信小程序开发一直用的版本v10.15.0，去node.js官网下载最新LTS版本就行，完成后，win+R运行cmd，输入node -v查看node.js版本。运行项目，npm start，运行成功，可在本地8080端口打开。下载后，一直安装就OK，之前安装过node,js的会自动重装。
vite打包后报错globalThis is not defined
sinat_39305013的博客
03-03 5802
问题： 浏览器版本65 globalThis需要chrome 71以上 vite+vue3.0打包项目后，浏览器提示globalThis is not defined。 解答： 修改vite.config.js 添加插件@vitejs/plugin-legacy import legacy from '@vitejs/plugin-legacy' export default defineConfig({ plugins: [ legacy({ targets: ['Chrome 63'],
vite打包后的项目在有的浏览器上报错globalThis is not defined
weixin_45644355的博客
04-11 1786
【代码】vite打包后的项目在有的浏览器上报错globalThis is not defined。
解决globalThis is not defined的问题
sq66666的博客
07-01 1万+
在前端引入一些开源组件库时，在低版本浏览器中可能会出现globalThis is not defined的问题,在html头部增加如下代码即可解决
vite 关于 global is not defined 问题
CamilleZJ的博客
11-09 3893
原因：Vite 是 ESM 机制，有些包内部使用了 node 的 global 对象。问题：在使用第三方包的时候也报错：global is not defined。
vue2打包报错globalThis is not defined
最新发布
03-20
<think>好的，我现在需要解决用户在Vue2项目打包时遇到的'globalThis is not defined'错误。首先，我得理解这个错误的原因。用户提到在构建过程中出现这个错误，可能涉及到JavaScript的全局对象globalThis未被识别。 首先，回忆一下，globalThis是在ES2020中引入的，用于统一不同环境下的全局对象访问，比如浏览器中的window，Node.js中的global等。而Vue2默认可能使用的是较旧的ES标准，或者构建工具（如Webpack、Babel）配置不支持ES2020的特性，导致在低版本环境中无法识别globalThis。 接下来，我需要考虑用户的项目环境。Vue2项目通常使用Webpack和Babel进行打包和转译。如果Babel配置没有正确处理新的语法或全局变量，就可能导致这个问题。可能的解决方案包括： 1. **添加Babel插件**：使用@babel/plugin-transform-runtime或core-js来polyfill缺失的全局对象。需要检查项目的.babelrc或babel.config.js文件，确保包含必要的插件和配置。 2. **升级依赖**：某些第三方库可能依赖较新的JavaScript特性，如果项目中的依赖版本过低，可能需要升级到兼容Vue2的版本，或者寻找替代库。 3. **Webpack配置调整**：可能需要配置Webpack的target属性，明确指定构建目标环境，避免默认配置可能导致的兼容性问题。 另外，参考用户提供的引用中，有一个关于Node.js报错解决方法的链接[^1]，虽然问题不同，但可能涉及类似的环境配置问题。此外，用户提到的另一个引用关于ffmpeg配置的解决方案[^2]，可能需要类似的思路，比如调整构建工具的配置选项。 还需要检查代码中是否有直接使用globalThis的地方，可能是某个第三方库引入的。如果无法避免，可以通过定义全局变量来模拟globalThis，例如在入口文件中添加： ```javascript if (typeof globalThis === 'undefined') { window.globalThis = window; } ``` 但这可能不适用于所有环境，需谨慎使用。 最后，需要确保所有配置更改后，重新安装依赖并清理构建缓存（如删除node_modules和dist目录，重新运行npm install等），以避免旧缓存导致的问题。</think>### Vue2项目打包时出现'globalThis is not defined'错误的解决方案 #### 问题原因 该错误通常是因为项目代码或依赖的第三方库中使用了`globalThis`（ES2020新增的全局对象），而当前构建环境（如Babel/Webpack配置）未正确处理ES6+语法或未添加必要的Polyfill支持[^1]。 --- #### 分步解决方案 1. **添加Polyfill支持** - **安装依赖**： ```bash npm install core-js@3 regenerator-runtime ``` - **修改`babel.config.js`**： ```javascript module.exports = { presets: [ ['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', // 按需注入Polyfill corejs: 3 // 指定core-js版本 }] ] } ``` 这会自动为`globalThis`等新特性添加Polyfill。 2. **显式引入Polyfill（备用方案）** 在项目入口文件（如`main.js`）顶部添加： ```javascript import 'core-js/stable/global-this' ``` 3. **检查Webpack配置** 确保`vue.config.js`中未覆盖Babel默认配置： ```javascript module.exports = { transpileDependencies: true, // 默认会转译node_modules中的依赖 chainWebpack: config => { config.target('web') // 明确构建目标为浏览器环境 } } ``` 4. **升级第三方库** 检查`package.json`中是否有过时依赖： ```bash npm outdated ``` 重点升级使用`globalThis`的库（如`axios@1.0+`、现代工具库等）。 --- #### 验证步骤 1. 清理缓存后重新构建： ```bash rm -rf node_modules dist npm install npm run build ``` 2. 如果仍报错，在代码中定位`globalThis`使用位置： ```bash grep -rn 'globalThis' src/ ``` --- #### 扩展知识 - `globalThis`的兼容性：IE不支持，现代浏览器需2019年后版本[^1] - Vue2默认使用ES5标准构建，需显式配置才能支持ES6+特性 - Polyfill原理：在旧环境中模拟新API的实现
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值