如何在ViteJS项目中暴露全局变量供index.html调用？

问题原因 #

你遇到的报错核心是模块脚本的异步执行特性：

• <script type="module">属于异步加载执行的脚本，浏览器会优先处理普通<script>，再异步加载并执行模块脚本
• 控制台的输出顺序也能验证这一点：先打印Hello vite...并触发报错，之后才打印Hello from main.ts，说明window.Test还未完成挂载就被调用了

解决方案 #

方案1：延迟调用，等待模块加载完成

修改HTML中的普通脚本，通过DOMContentLoaded事件等待页面所有资源加载完成后再调用全局函数：

<script>
  console.log("Hello vite...");
  window.addEventListener('DOMContentLoaded', () => {
    Test();
  });
</script>

也可以直接监听模块脚本的load事件：

<script type="module" src="/src/main.ts" onload="Test()"></script>
<script>
  console.log("Hello vite...");
</script>

方案2：修改Vite构建配置，打包成IIFE/UMD格式

如果你的目标是构建可直接全局调用的类库，推荐将Vite的输出格式改为IIFE（立即执行函数表达式）或UMD，这类格式会自动将变量挂载到window，且脚本同步执行：

1. 修改vite.config.ts：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/main.ts',
      name: 'MyLibrary', // 全局命名空间（可选）
      formats: ['iife', 'umd'], // 指定打包格式
      fileName: (format) => `my-lib.${format}.js`
    }
  }
});

2. 构建完成后，在HTML中引入打包后的IIFE脚本（无需type="module"）：

<script src="/dist/my-lib.iife.js"></script>
<script>
  console.log("Hello vite...");
  Test(); // 可直接调用，无需等待
</script>

方案3：补充TypeScript类型声明（可选）

直接给window添加属性会触发TypeScript类型报错，可通过扩展Window接口解决：
在项目中创建src/types/window.d.ts文件：

declare global {
  interface Window {
    Test: () => void;
  }
}

export {};

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