Vue3 TypeScript 错误：Uncaught ReferenceError: global is not defined - 解决方法

这个错误是由于在Vue3中使用TypeScript时，Pixi.js库中的polyfill/requestAnimationFrame.js文件使用了'global'变量，但是在浏览器环境中不存在'global'变量，所以会报错。

要解决这个问题，你可以尝试以下几种方法：

1. 使用@pixi/legacy包：

   • 安装@pixi/legacy包：npm install @pixi/legacy
   • 在代码中引入Pixi.js时，使用@pixi/legacy替代pixi.js：import * as PIXI from '@pixi/legacy'

2. 在Vue项目的tsconfig.json文件中配置全局变量：

   • 打开tsconfig.json文件
   • 在compilerOptions节点下，添加'skipLibCheck': true
   • 在compilerOptions节点下，添加'lib': ['DOM', 'ES2020']
   • 保存文件并重新编译项目

3. 在Vue项目的index.html文件中引入pixi.js文件：

   • 在index.html文件的标签中添加以下代码： <script src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js'></script>
   • 保存文件并重新运行项目

其中，第一种方法是推荐的方式，因为它可以确保Pixi.js库与Vue3的TypeScript兼容性，并且不需要对项目的配置文件进行更改。