学习之前，我们首先一起来学习一下项目的整体结构。
大概的目录如下
10
# + 表示文件夹 - 表示文件
20
+
node_modules
30
+
public
40
+
src
50
-
.gitignore
60
-
.eslint.config.js
70
-
index.html
80
-
package.json
90
-
README.md
10
-
tsconfig.json
11
-
vite.config.ts
node_modules
是项目所有依赖包的安装位置。我们的项目依赖配置在 package.json
文件中，当我们执行
npm i
时，所有的依赖包都会安装到 node_modules
文件中去。
当我们在模块中使用如下代码时
1
import
{useState}
from
'react '
2
import
lodash
from
'lodash '
3
4
...
此时构建工具会模拟 node.js
的模块查找规则，自动从同级目录的 node_modules
文件夹中查找是否存在该模块。他的查找顺序为
在我们的前端项目中，通常情况下仅会在项目根目录中包含 node_modules
文件夹。例如我们要找到的 react
模块放在 node_modules/react
中。
当在 node_modules 文件夹中找到了依赖包文件之后，此时的三方依赖包通常会在自己项目的 package.json
文件中设置模块入口文件。例如在 React 中，通过字段 main
来设置。
10
{
20
"name "
:
"react "
,
30
"description "
:
"React is a JavaScript library for building user interfaces."
,
40
"keywords "
: [
50
"react "
60
],
70
"version "
:
"19.0.0 "
,
80
"main "
:
"index.js "
,
90
...
10
}
掌握这些基础知识，我们可以非常准确的定位到三方依赖的模块代码。
public 是一个非常特殊的文件夹。用于存放不需要经过构建处理的静态资源 ，这些资源会直接被复制到构建输出的根目录中，开发者可以通过根路径直接访问它们。
例如，我们有一个 logo.png
存放在 public 目录中
1
+
public
2
+
images
3
-
logo.png
4
-
react.svg
5
-
vite.svg
那么在项目代码中，我们就可以直接使用根目录来访问该图片。注意这里的访问目录是 /images/logo.png
，而不是 public/images/logo.png
。这是因为构建之后，public 下的内容会直接复制到构建根目录中。
<
img
src
=
"/images/logo.png "
alt
=
""
/>
在使用的时候，我们一定要住，存放在 public 中的静态资源，一定是你非常明确不需要进行任何处理和优化的静态资源。例如字体文件、已经被压缩过的三方依赖包等
常见的使用场景如下
1
+
public
2
-
favicon.ico
3
+
fonts
4
-
font.woff2
5
-
font.tto
6
+
documents
7
-
manual.pdf
项目构建之后输出结果为
1
+
dist
2
-
favicon.ico
3
+
fonts
4
-
font.woff2
5
-
font.tto
6
+
documents
7
-
manual.pdf
这是项目的核心目录，我们开发项目时，所编写的项目几乎都是存放在该项目中，包括组件、样式、工具函数、配置文件等等。它是开发过程中最主要的目录，所有需要经过 Vite 构建工具处理的代码和资源都应该放在这里。
在自动创建的 react 项目中，src 目录中的 main.tsx
是项目的入口文件
10
import
{ StrictMode }
from
'react '
20
import
{ createRoot }
from
'react-dom/client '
30
import
'./index.css '
40
import
App
from
'./App.tsx '
50
60
createRoot
(document.
getElementById
(
'root '
)
!
).
render
(
70
<
StrictMode
>
80
<
App
/>
90
</
StrictMode
>,
10
)
我们可以看到，在该目录中，代码是通过模块化的方式组织（如 ES Modules 或 CommonJS） 组织起来的。我们会大量运用到 import
export
require
等模块相关的语法。
在项目根目录中，我们还发现了一个比较重要的文件 index.html
. index.html 是项目的入口 HTML 文件，也是 Vite 开发服务器和构建过程的起点。它扮演着至关重要的角色，既是应用的页面骨架，也是 Vite 注入脚本和资源的入口。
vite 会将所有资源打包并注入到该文件中。
1
<
link
rel
=
"stylesheet "
href
=
"/assets/style.abc123.css "
/>
2
<
script
type
=
"module "
src
=
"/assets/main.xyz456.js "
></
script
>
我们也可以手动在 index.html
中新增一些代码，例如，配置 viewport
，引入第三方已经打包好的静态资源等。
10
<!
doctype
html
>
20
<
html
lang
=
"zh "
>
30
<
head
>
40
<
meta
charset
=
"UTF-8 "
/>
50
<
link
href
=
"https://framerusercontent.com/images/YRd2KCq4G2aXNg15aHvl7AtcGQ.png "
rel
=
"icon "
media
=
"(prefers-color-scheme: light)"
>
60
<
link
rel
=
"stylesheet "
href
=
"https://rsms.me/inter/inter.css "
>
70
<
meta
name
=
"viewport "
content
=
"width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no "
/>
80
<
meta
name
=
"mobile-web-app-capable "
content
=
"yes "
>
90
<
meta
name
=
"apple-mobile-web-app-status-bar-style "
content
=
"black-translucent "
>
10
<
title
>usehook - 这波能反杀 </
title
>
11
</
head
>
12
<
body
>
13
<
div
id
=
"root "
></
div
>
14
<
script
type
=
"module "
src
=
"/src/main.tsx "
></
script
>
15
</
body
>
16
</
html
>