【构建后的文件目录】vite构建项目的基本文件；React文件

vite构建基本

基础篇(开发环境搭建)_哔哩哔哩_bilibili

index.html

index.html是vite的入口文件，webpack是用js做入口文件

package-lock.json

两个功能：

• 锁版本号
• 缓存（如果本地 node_modules 中的包与 lock 文件记录的哈希值匹配，npm会直接使用缓存，跳过额外的下载过程）

package.json

项目描述文件

属性：

• private：true就是不希望项目发布到npm上
• type：module就是esm风格
• scripts：可执行命令
• dependencies：开发环境和上线都需要的依赖，会打包
• devDependencies：开发环境使用的依赖，一般不打包

public和assets

public公共目录：

不会随着项目打包，public在编译完成后会把目录下的文件放在根目录里面

assets静态资源目录：

随着项目代码进行编译，不会放在根目录里面

index.html

让根组件（App.tsx或App.vue）挂载在id为root的DOM节点下

React相关

基础篇(开发环境搭建)_哔哩哔哩_bilibili

tsconfig.json等文件

• tsconfig.json：主入口，引用其他配置文件
• tsconfig.app.json：前端应用代码的编译规则
• tsconfig.node.json：构建脚本（如 vite.config.ts）的编译规则
• vite.config.ts：Vite 构建工具的核心配置文件

文件名	角色	运行环境	关键特征
tsconfig.json	总指挥	无（仅作为索引）	包含 references，指向其他两个文件
tsconfig.app.json	应用开发	浏览器 (Browser)	包含 DOM 类型，管理 src 目录
tsconfig.node.json	工程构建	Node.js	包含 node 类型，管理 vite.config.ts

App.tsx

根组件

main.tsx

项目的入口文件

index.css

全局样式文件