vite build 后 index.html 中 script 仍为 /src/main.js 是因 html 不被编译且路径未匹配插件条件：index.html 必须在根目录、script src 需用相对路径（如 ./main.js）、未自定义 rollupoptions，且 base 配置影响资源前缀但不改变 html 位置。
为什么 vite build 后 index.html 里 script 还是 /src/main.js？
因为 Vite 默认把 index.html 当作入口模板，不是构建目标——它不编译 HTML，也不自动重写里面的 <script></script> 路径。你看到的空白页或 Failed to load module，八成是 <script type="module" src="/src/main.js"></script> 没被替换，而实际打包输出的是 assets/index-xxx.js。
关键前提是：Vite 的 HTML 插件只在满足以下条件时才生效：
-
index.html必须放在项目根目录（不能挪到src/或其他子目录） -
<script></script>标签里的src必须是相对路径（如./main.js），不能是绝对路径（如/src/main.js） - 没手动改过
build.rollupOptions.output，否则会破坏插件匹配逻辑
vite.config.ts 中 base 配置影响所有静态资源路径
base 决定构建后所有资源 URL 的前缀，但它不改变 HTML 文件本身的位置，只影响生成的 src 和 href 值。
常见错误是部署到子目录（比如 https://example.com/my-app/）却没配 base，导致浏览器去根目录找 /assets/ 而 404。
实操建议：
- 本地开发 + 生产部署在域名根路径 →
base: '/'（默认，不用写） - 生产部署在子目录 →
base: '/my-app/'（结尾必须带斜杠） - 通用兼容方案（推荐）→
base: './'，这样无论部署在哪级路径都基于 HTML 当前位置解析
注意：base: './' 会让所有资源路径变成相对路径（如 ./assets/index-xxx.js），但不会影响 public/ 下的文件引用方式。
public 目录与 src 中静态资源的处理差异
public/ 下的文件在构建时直接复制进 dist/，不走哈希、不压缩、不重命名；src/ 中的资源则会被 Vite 处理（加 hash、压缩、转 base64 等）。
引用方式直接影响能否正确加载：
- HTML 中用
<img src="/logo.png">→ 实际读取public/logo.png，构建后仍是/logo.png（注意：若配了base: './'，该路径会失效） - JS 中用
import logo from '@/assets/logo.png'→ 走模块系统，生成带 hash 的路径，且自动适配base - CSS 中用
background: url('@/assets/bg.jpg')→ 同样被解析并注入哈希名
容易踩的坑：
- 误把需哈希的图片放
public/，导致缓存无法更新 - 在 JS 里拼接字符串引用
public/资源（如const url = '/icon-' + id + '.png'），Vite 不会识别，构建后路径不变，但文件名未哈希 → 缓存问题
动态导入和 import.meta.glob 的路径必须可静态分析
Vite 在编译阶段就展开 import.meta.glob 和静态 import()，所以路径不能是完全运行时拼接的变量。
支持的写法：
-
import.meta.glob('./pages/*.vue')→ ✅ 编译时能扫描到全部匹配文件 -
const mod = await import(`./utils/${name}.ts`)→ ❌name是运行时变量，Vite 无法预知，构建时报错或漏打包 -
const mod = await import(`./locales/${lang}.json`)→ ⚠️ 若lang是有限枚举（如'zh'|'en'），可用import.meta.glob预加载再查表
真正动态的路径（比如用户上传的文件名）只能走 URL.createObjectURL 或后端 API 返回 URL，不能靠 Vite 构建时处理。
最后提醒一句：Vite 的静态资源路径解析发生在构建时，不是运行时。任何依赖“执行时才知道路径”的逻辑，都不在 Vite 的处理范围内 —— 它只认死路径、glob 模式、以及 new URL('./x', import.meta.url) 这类语法上可推导的引用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
