项目目录结构解析

Vite 项目目录结构简洁，了解各目录作用有助于正确组织项目代码。

标准目录结构

HTML

my-project/
├── index.html        # 入口 HTML 文件
├── package.json      # 项目配置
├── vite.config.js    # Vite 配置文件
├── public/           # 静态资源目录
│   └── favicon.ico
├── src/              # 源代码目录
│   ├── main.js       # 入口脚本
│   ├── App.vue       # 根组件（Vue 项目）
│   └── assets/       # 资源文件
│   └── components/   # 组件目录
│   └── styles/       # 样式目录
└── node_modules/     # 依赖包

核心文件说明

文件/目录	作用
index.html	入口页面，Vite 将其作为应用入口
vite.config.js	Vite 配置文件
src/	源代码目录，存放业务代码
public/	静态资源，不经过处理直接复制
node_modules/	依赖包存储目录

index.html 特点

text

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 使用 type="module" 引入 ES 模块 -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

注意：script 标签必须使用 type="module" 才能正确加载 ES 模块。

src 与 public 区别

对比项	src/assets	public
处理方式	经 Vite 处理，支持哈希	直接复制，原样输出
引用方式	相对路径导入	绝对路径 `/xxx`
适用场景	需处理的资源	固定引用的资源

要点总结

index.html 是 Vite 的入口文件
src/ 存放源代码和可处理资源
public/ 存放不需处理的静态资源
script 标签必须使用 type="module"

📝 发现内容有误？点击此处直接编辑