纯静态页面应直接写 index.html；需组件化或复杂交互时选 vite（比 cra 更轻）；vite 的 vanilla 模板支持热更新和 esm，无需配置即可运行；手写 html 需注意 charset、module 脚本和本地服务器。
用 create-react-app 还是直接写 index.html？
如果你说的“html5_html5项目”只是想跑一个纯静态页面（比如个人简历、产品单页、原型演示），根本不需要任何构建工具。直接新建一个 index.html 文件，写好 和基础结构就行——<code>create-react-app 或 vite 这类工具反而会增加启动成本和理解负担。
只有当你明确需要：组件化开发、JSX、状态管理、热更新、或后续要接入 API/路由时，才该选框架工具。
- 纯展示页面 → 新建
index.html+style.css+script.js - 带交互逻辑且可能变复杂 → 用
vite（比create-react-app更轻、更快） - 已熟悉 React 生态、团队有约定 → 可选
create-react-app，但注意它默认不支持 JSX 自动识别.html入口
vite 初始化 HTML 项目为什么比手动建更值得考虑
很多人以为 vite 只为 Vue/React 设计，其实它原生支持纯 HTML 模式（--template vanilla），还能自动处理 import、CSS 模块、本地服务器、甚至 HTTPS 代理——这些手动搭起来容易出错，尤其路径引用或 MIME 类型问题。
执行这行命令就能生成一个带热更新、ESM 支持、无打包的最小 HTML 项目：
立即学习“前端免费学习笔记（深入）”；
vite my-project --template vanilla
生成后目录里就有 index.html、main.js、style.css，直接 npm run dev 就能跑。注意：它默认入口是 index.html，不是你随便起名的 page.html；改入口要配 vite.config.js 的 root 或 build.rollupOptions.input。
- 不写配置也能用，适合快速验证想法
-
import语句在浏览器中直接运行（依赖现代浏览器），不用 Babel 编译 - 如果用了
<script type="module"></script>，路径必须是相对或绝对 URL，不能是 bare import（如import { foo } from 'lodash'会报错）
手写 index.html 时最容易漏掉的三件事
看似最简单的做法，实际部署或调试时高频翻车。核心不是“能不能显示”，而是“能不能稳定工作”。
- 忘了加
<meta charset="UTF-8">→ 中文乱码、表单提交异常 -
<script></script>标签没加type="module"或没放
