使用Vite.js结合TypeScript开发时，为何会出现ReferenceError: Can't find variable: VGraph错误？

这个报错其实是ES模块的作用域隔离机制在搞鬼，咱们一步步拆解清楚：

1. 核心原因：ES模块的变量不会自动暴露到全局 #

你用<script type="module">引入的VGraph.ts是标准ES模块，模块内部的所有导出（包括你定义的VGraph类）默认只会被限制在模块自己的作用域里，不会自动挂载到浏览器的window全局对象上。而你后面的普通<script>标签是运行在全局作用域的，自然找不到这个“藏”在模块作用域里的VGraph。

哪怕浏览器显示文件已经加载成功，模块里的变量也不会“漏”到全局环境中。

2. 几个可行的修复方案 #

针对你的场景，这里有几种简单的解决办法：

方案一：手动把VGraph挂载到全局window对象 #

在src/vmodel/VGraph.ts文件的末尾，添加一行代码把类暴露到全局：

export class VGraph {
  // 你的类实现代码
}

// 手动挂载到window，让全局作用域能访问到
(window as any).VGraph = VGraph;

这样后面的普通脚本就能在全局作用域找到VGraph了。

方案二：把第二个脚本也改成模块类型 #

把普通<script>标签改成<script type="module">，然后用import语句直接导入VGraph：

<script type="module" src="/src/vmodel/VGraph.ts"></script>
<script type="module">
  // 从模块路径导入需要的类
  import { VGraph } from '/src/vmodel/VGraph.ts';
  const graph = new VGraph();
</script>

这是更符合ES模块规范的做法，能避免全局变量污染，推荐在项目中优先使用。

方案三：合并逻辑到同一个模块 #

如果代码逻辑不复杂，也可以把创建实例的代码直接写到VGraph.ts里，或者新建一个入口模块整合这两部分逻辑，最后只在index.html里引入这个入口模块即可。

内容的提问来源于stack exchange，提问作者Wizard of Kneup