vite 通过开发服务器动态编译 typescript 并返回标准 javascript 响应（content-type: text/javascript），使浏览器能像加载 .js 模块一样处理 .ts 路径——实际传输的并非原始 ts 源码，而是即时转译后的合法 es 模块代码。
vite 通过开发服务器动态编译 typescript 并返回标准 javascript 响应（content-type: text/javascript），使浏览器能像加载 .js 模块一样处理 .ts 路径——实际传输的并非原始 ts 源码，而是即时转译后的合法 es 模块代码。
在 Vite 项目中，你常会看到这样的写法：
<!-- index.html --> <script type="module" src="/src/main.ts"></script>
表面上看，浏览器似乎“直接运行了 TypeScript”，但这是一种简洁的开发体验假象。浏览器本身完全不支持解析或执行 .ts 文件——它只接受符合 ECMAScript 标准的 JavaScript 模块（MIME 类型必须为 text/javascript）。Vite 的魔法在于其开发服务器（基于 esbuild + rollup 插件生态）拦截了所有对 /src/xxx.ts 的请求，并在内存中完成以下流程：
- 按需读取原始 .ts 源文件；
- 执行类型擦除（Type Erasure）与语法降级（如可选链、nullish 合并等转为兼容代码）；
- 生成标准 ES 模块格式的 JavaScript 字符串；
- 以 Content-Type: text/javascript 响应 HTTP 请求，路径仍保留 /src/main.ts，但响应体已是纯 JS。
因此，浏览器收到的是合法 JS 模块，自然可正常解析执行。你可以用浏览器开发者工具的 Network 面板验证：点击该 .ts 请求，查看 Response Headers → Content-Type 字段确为 text/javascript，Response Body 则是已编译的 JS 代码（不含任何 TypeScript 语法）。
⚠️ 注意事项：
- 此机制仅存在于 Vite 开发服务器（vite dev）中，生产构建（vite build）会将所有 .ts 编译为 .js 输出到 dist/，HTML 中引用的也将是 .js 文件；
- 若你用 python -m http.server 或其他静态服务器尝试相同 HTML，会触发 MIME 类型错误（如 video/mp2t 是因系统默认映射 .ts 后缀导致），因为静态服务器直接返回原始文件内容，且未设置正确 MIME 类型；
- Vite 还支持其他非 JS 资源（如 .vue, .svelte, .jsx）同理：路径即逻辑入口，内容由服务端实时转换，与文件扩展名解耦。
简言之：Vite 让 .ts “可执行”，靠的不是浏览器能力升级，而是智能服务端代理——它把路径当作编译指令，把响应体当作最终产物。 理解这一点，是掌握现代前端构建工具工作原理的关键起点。
