在 Vue 3 项目（特别是 Vite 项目）中，index.html 里的 <script> 标签必须加上 type="module"。不加会导致程序无法运行。

核心区别：加与不加

<script src="./src/main.ts"> (不加 type="module")

浏览器会将 main.ts 视为一个普通的 JavaScript 脚本来解析和执行。

• 问题所在：main.ts 文件里包含了 import 语句（如 import { createApp } from 'vue'），这是 ES Module 的语法。
• 直接后果：浏览器在解析到 import 关键字时会抛出错误：Uncaught SyntaxError: Cannot use import statement outside a module (无法在模块外部使用 import 语句)。应用会直接白屏，无法启动。

<script type="module" src="./src/main.ts"> (加 type="module")

这会告诉浏览器，请将 main.ts 及其所有依赖当作一个 ES Module (ES6 模块) 来加载和执行。

• 正确工作：浏览器会正确识别并处理文件中的所有 import 和 export 语句，从而成功启动你的 Vue 3 应用。

为什么 Vite 项目必须这样做？

这个要求源于 Vite 的核心设计哲学：利用浏览器原生 ES Module 能力，在开发环境下实现“按需编译”，而不是像 Webpack 那样把所有代码预先打包成一个巨大的文件。

• Vite 的开发服务器：启动后，并不会打包你的代码。它只是等待浏览器发起请求。
• type="module" 的作用：当浏览器请求 main.ts 时，Vite 服务器会拦截这个请求，实时地将 main.ts 以及它 import 的每一个模块（如 vue、App.vue 等）编译成浏览器可执行的 ES Module 格式，然后返回给浏览器。

因此，type="module" 不仅是一个语法要求，更是开启 Vite 整个工作流的关键开关。这个设计也使得 Vue 3 可以更纯粹地拥抱 ES Module 标准。

总结

在 Vue 3 + Vite 的项目中，index.html 里的入口 script 标签必须添加 type="module" 属性，这是启动应用的先决条件。不加会导致 import 语法报错，应用无法运行。

建议直接使用 npm create vue@latest 等官方脚手架创建项目，它们会自动生成包含正确 type="module" 的 index.html 文件。