Blink.jl连接Vue/Vite项目无法加载main.ts，报globalThis未定义错误

问题原因 #

Blink.jl底层依赖的Electron版本偏旧，不支持ES2020引入的globalThis全局对象，而Vite默认构建输出会使用该对象，导致脚本加载失败。

解决方案 #

方案一：手动注入globalThis兼容定义

在项目HTML的<head>标签内添加一段脚本，提前为旧环境定义globalThis：

<script>
  if (typeof globalThis === 'undefined') {
    window.globalThis = window;
  }
</script>

修改后的完整HTML示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
      if (typeof globalThis === 'undefined') {
        window.globalThis = window;
      }
    </script>
  </head>
  <body>
    <div id="app">hello</div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

方案二：配置Vite Legacy模式自动兼容

通过Vite的legacy插件生成适配旧环境的代码：

1. 安装依赖插件：

npm install @vitejs/plugin-legacy --save-dev

2. 修改vite.config.ts配置文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['electron >= 5'], // 根据Blink实际依赖的Electron版本调整
      additionalLegacyPolyfills: ['es.global-this']
    })
  ]
})

验证方法 #

修改完成后重启Vite开发服务器，重新运行你的Blink.jl代码，即可正常加载main.ts文件。

内容的提问来源于stack exchange，提问作者BAR