Vite开发时index.html中的import能运行，是因为Vite劫持ES模块加载逻辑，自动重写路径和裸包名；但build后不再支持，需确保产物路径正确。
Vite 不是“配置好就能跑”的工具，它默认只处理模块化 JavaScript 和 CSS，HTML 文件本身不经过构建流程——这意味着你不能直接在 index.html 里写 import 或用环境变量，除非显式启用插件或遵循约定。
为什么 index.html 里的 import 能直接运行
Vite 在开发服务器中劫持了原生 ES 模块加载逻辑。当你访问 http://localhost:5173/，Vite 会拦截对 .js 文件的请求，自动将相对路径转为带版本哈希的请求，并将 import 中的裸包名（如 vue）重写为 /node_modules/.vite/deps/vue.js?v=xxx。
- 这个行为只在开发时生效，
vite build后的 HTML 不再有此能力，必须靠构建产物路径正确引用 -
index.html必须放在项目根目录，Vite 才会把它作为入口 HTML；放错位置（比如src/index.html）会导致 404 或静态资源路径错乱 - 如果在
index.html中写了<script type="module" src="./src/main.js"></script>，Vite 会自动解析并转换其中的 import，但不会处理<script>内联脚本里的import
vite.config.js 哪些配置改了会影响 HTML 行为
Vite 默认把 index.html 当作 HTML 入口，但几个关键配置会改变它的解析方式：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
build.rollupOptions.input：若设为'src/main.js'，Vite 就不再以index.html为入口，构建后可能丢失 HTML 输出，需手动配build.rollupOptions.output.entryFileNames -
publicDir：默认是'public'，里面放的文件（如public/favicon.ico）会被原样复制到输出目录，路径在 HTML 中应写成/favicon.ico，不是./public/favicon.ico -
resolve.alias：只影响 JS/TS 模块解析，对index.html中的src或href属性无效；想让 HTML 里的路径也走别名，得用vite-plugin-html
开发时热更新失效的常见 HTML 相关原因
修改 index.html 本身通常会触发整页刷新，但某些改动不会触发，容易误判为 HMR 失效：
立即学习“前端免费学习笔记（深入）”；
- 只改了
<meta>、<title>或注释内容：Vite 默认不监听这些变更，需加插件如vite-plugin-html并开启inject或minify选项才能触发重载 - 在
index.html中通过<script type="module">写内联代码：Vite 不会对内联模块做 HMR，修改后必须手动刷新 - 使用了
base: './'但部署到非根路径（如https://a.com/myapp/）：开发时没问题，但构建后资源 404，看起来像“页面白屏”，其实是路径错了
真正麻烦的是 HTML 和构建产物耦合的部分：比如用 process.env 注入变量、动态插入 script 标签、或依赖服务端模板语法。Vite 默认不支持这些，得靠插件补足——而插件一旦没配对，开发和生产行为就会不一致。
