Vite 可直接运行纯 HTML 项目，只需根目录有 index.html 并安装 vite；常见错误包括未安装依赖、index.html 位置错误、误用 vite preview 替代开发服务器，路径引用需以 HTML 为基准，配置文件存在时需注意 fs 权限。
直接用 vite 命令就能跑纯 HTML，不用配构建配置
只要项目根目录下有 index.html，执行 vite 就会自动以它为入口启动开发服务器——Vite 本身就把 HTML 当作一等公民，不是“必须搭配 Vue/React 才能用”。
常见错误现象：npm run dev 报错 “Cannot find module 'vite'” 或 “no index.html found”，本质是没装依赖或文件名/位置不对。
- 确保已运行
npm install vite --save-dev（或pnpn add -D vite） -
index.html必须在执行vite命令的当前目录下，不是子文件夹里 - 不支持
vite src/index.html这种指定路径的写法；如需从子目录启动，得进到那层再运行 - Vite 默认端口是
5173，被占时会自动加 1，但不会提示你——建议启动后手动访问http://localhost:5173确认
vite preview 和 vite build 的关系要分清
vite preview 不是开发服务器，而是本地预览构建产物的静态服务；它只在 dist/ 存在且已执行过 vite build 后才有意义。很多人误以为它能替代 vite 启动开发环境。
-
vite→ 启动热更新开发服务器（支持 HMR、模块解析、ESM 原生加载） -
vite build→ 把index.html及其引用的 JS/CSS 资源打包输出到dist/ -
vite preview→ 用简易 HTTP 服务跑dist/，不带 HMR，也不解析import，仅用于验证构建结果 - 纯 HTML 项目若没用到 JS 模块，
vite build其实只是复制文件，但vite preview仍需它先生成dist/
HTML 中引入 JS/CSS 的路径容易出错
Vite 开发服务器是基于根目录提供资源的，所有相对路径都以 index.html 所在位置为基准，和传统 Web 服务器行为一致，但和某些本地双击打开的路径逻辑不同。
立即学习“前端免费学习笔记（深入）”；
-
<script src="./main.js"></script>✅ 正确：同级 JS 文件 -
<script src="main.js"></script>✅ 也正确（浏览器自动补./），但建议显式写./ -
<script src="/src/main.js"></script>❌ 错误：Vite 不把/src/当公开目录，除非你手动配server.fs.strict = false并启用server.fs.allow -
<link rel="stylesheet" href="style.css">✅ 可以，但注意 CSS 里的url()路径同样遵循 HTML 根目录规则
需要自定义端口、HTTPS 或代理？改 vite.config.js
纯 HTML 项目也能用配置文件，只要存在 vite.config.js（或 .ts），Vite 就会自动加载。不写配置也能跑，但遇到端口冲突、跨域调试等场景就得加了。
- 改端口：
export default { server: { port: 3000 } } - 启 HTTPS：
server: { https: true }（会自签证书，首次访问需点“高级→继续”） - 代理 API：
server: { proxy: { '/api': 'http://localhost:8000' } }，注意 HTML 中请求路径必须以/api开头才被代理 - 没有
vite.config.js时，无法通过命令行参数传--port，只能靠配置文件或环境变量VITE_PORT=3000
最常被忽略的是：配置文件一旦存在，哪怕只写 export default {}，Vite 就会严格按配置执行，比如 server.fs.allow 默认变为空数组，导致读不到上级目录的资源——纯 HTML 项目若引用了 ../data.json，就会 403。
