{"id":50709216,"url":"https://github.com/coowinit/vite-learning-notes","last_synced_at":"2026-06-09T14:01:46.050Z","repository":{"id":359014364,"uuid":"1244113136","full_name":"coowinit/vite-learning-notes","owner":"coowinit","description":"一个从零开始学习 Vite 的中文知识库，记录 Vite 的基本概念、项目结构、开发流程、构建流程、常见问题和深入研究笔记。","archived":false,"fork":false,"pushed_at":"2026-05-20T02:27:44.000Z","size":216,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-20T05:04:53.701Z","etag":null,"topics":["chinese-notes","es-modules","frontend","javascript","learning-notes","nodejs","npm","vite","web-development"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coowinit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-20T01:20:51.000Z","updated_at":"2026-05-20T02:27:47.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/coowinit/vite-learning-notes","commit_stats":null,"previous_names":["coowinit/vite-learning-notes"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/coowinit/vite-learning-notes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fvite-learning-notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fvite-learning-notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fvite-learning-notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fvite-learning-notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coowinit","download_url":"https://codeload.github.com/coowinit/vite-learning-notes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fvite-learning-notes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34110012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chinese-notes","es-modules","frontend","javascript","learning-notes","nodejs","npm","vite","web-development"],"created_at":"2026-06-09T14:01:44.916Z","updated_at":"2026-06-09T14:01:46.043Z","avatar_url":"https://github.com/coowinit.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vite 学习笔记\n\n\u003e 当前版本：`v0.1.2`  \n\u003e 学习目标：从零开始理解 Vite，不只是会运行命令，而是弄清楚它在现代前端项目中的位置、作用、目录结构、开发流程和构建流程。\n\n这是一个用于系统学习 Vite 的中文知识库。\n\n本仓库从零开始记录 Vite 的核心概念、项目搭建流程、目录结构、常用命令、开发环境与生产环境的区别，以及后续深入学习过程中的实践和总结。\n\n---\n\n## 目录\n\n- [Vite 学习笔记](#vite-学习笔记)\n  - [目录](#目录)\n  - [1. Vite 是什么？](#1-vite-是什么)\n  - [2. Vite 不是什么？](#2-vite-不是什么)\n  - [3. Vite 为什么出现？](#3-vite-为什么出现)\n  - [4. Vite 主要替代了什么？](#4-vite-主要替代了什么)\n  - [5. 最小 Vite 项目搭建](#5-最小-vite-项目搭建)\n    - [5.1 检查 Node.js 和 npm](#51-检查-nodejs-和-npm)\n    - [5.2 创建一个最小 Vite 项目](#52-创建一个最小-vite-项目)\n    - [5.3 进入项目目录](#53-进入项目目录)\n    - [5.4 安装依赖](#54-安装依赖)\n    - [5.5 启动开发服务器](#55-启动开发服务器)\n  - [6. 常用命令说明](#6-常用命令说明)\n    - [开发预览](#开发预览)\n    - [构建项目](#构建项目)\n    - [预览构建结果](#预览构建结果)\n  - [7. Vite 项目目录结构](#7-vite-项目目录结构)\n  - [8. 核心文件说明](#8-核心文件说明)\n    - [8.1 package.json](#81-packagejson)\n    - [8.2 index.html](#82-indexhtml)\n    - [8.3 src/main.js](#83-srcmainjs)\n    - [8.4 src/style.css](#84-srcstylecss)\n  - [9. src 和 public 的区别](#9-src-和-public-的区别)\n    - [src](#src)\n    - [public](#public)\n    - [src 与 public 对比](#src-与-public-对比)\n  - [10. node\\_modules 可以删除吗？](#10-node_modules-可以删除吗)\n  - [11. package-lock.json 可以删除吗？](#11-package-lockjson-可以删除吗)\n  - [12. .gitignore 是什么？](#12-gitignore-是什么)\n  - [13. public 可以删除吗？](#13-public-可以删除吗)\n  - [14. src 中的默认文件可以删除吗？](#14-src-中的默认文件可以删除吗)\n  - [15. 开发环境和生产环境](#15-开发环境和生产环境)\n    - [开发环境](#开发环境)\n    - [生产环境](#生产环境)\n  - [16. 什么是 HMR？](#16-什么是-hmr)\n  - [17. 什么是 ES Modules？](#17-什么是-es-modules)\n  - [18. 自己创建一个模块](#18-自己创建一个模块)\n  - [19. Vite 和 React、Vue 的关系](#19-vite-和-reactvue-的关系)\n  - [20. vite.config.js 是什么？](#20-viteconfigjs-是什么)\n  - [21. 常见报错：找不到 package.json](#21-常见报错找不到-packagejson)\n  - [22. 最小源码结构](#22-最小源码结构)\n  - [23. 推荐仓库目录结构](#23-推荐仓库目录结构)\n  - [24. 示例项目运行入口](#24-示例项目运行入口)\n  - [25. 推荐学习路线](#25-推荐学习路线)\n    - [第一阶段：基础使用](#第一阶段基础使用)\n    - [第二阶段：项目结构](#第二阶段项目结构)\n    - [第三阶段：模块化](#第三阶段模块化)\n    - [第四阶段：构建与部署](#第四阶段构建与部署)\n    - [第五阶段：框架结合](#第五阶段框架结合)\n    - [第六阶段：深入原理](#第六阶段深入原理)\n  - [26. 后续计划](#26-后续计划)\n  - [27. 当前理解总结](#27-当前理解总结)\n  - [License](#license)\n\n---\n\n## 1. Vite 是什么？\n\nVite 不是一个前端框架，也不是运行环境。\n\n它可以理解为：\n\n\u003e Vite 是现代前端项目的开发服务器和打包工具。\n\n它主要负责两件事：\n\n1. 开发阶段：快速启动本地开发服务器，支持热更新。\n2. 构建阶段：将源码打包成可以部署上线的静态文件。\n\n常见命令：\n\n```bash\nnpm run dev\nnpm run build\nnpm run preview\n```\n\n---\n\n## 2. Vite 不是什么？\n\nVite 不是 Node.js。\n\nNode.js 是运行 JavaScript 工具的环境。\n\nVite 运行在 Node.js 之上。\n\nVite 也不是 npm。\n\nnpm 是包管理工具，用来安装依赖和执行脚本。\n\nVite 也不是 React 或 Vue。\n\nReact、Vue 是前端框架。\n\nVite 是帮助 React、Vue 或普通 JavaScript 项目运行和打包的工具。\n\n关系可以理解为：\n\n```text\nNode.js\n  └── npm\n       └── Vite\n            ├── Vanilla JavaScript 项目\n            ├── React 项目\n            ├── Vue 项目\n            └── 其他前端项目\n```\n\n---\n\n## 3. Vite 为什么出现？\n\n在 Vite 出现之前，很多前端项目使用 Webpack、Vue CLI、Create React App 等工具。\n\n这些工具在项目较大时，经常会遇到：\n\n- 启动慢\n- 修改代码后刷新慢\n- 配置复杂\n- 开发体验不够轻快\n\nVite 出现的背景是：\n\n\u003e 现代浏览器已经支持 ES Modules，前端项目不一定需要在开发阶段先完整打包。\n\n传统工具的思路更接近：\n\n```text\n先整体打包项目 → 再启动开发页面\n```\n\nVite 的开发思路更接近：\n\n```text\n先启动开发服务器 → 浏览器需要哪个模块，就处理哪个模块\n```\n\n因此，Vite 在开发阶段通常启动更快，热更新也更快。\n\n---\n\n## 4. Vite 主要替代了什么？\n\nVite 在很多新项目中主要替代的是：\n\n- Webpack\n- Webpack Dev Server\n- Vue CLI\n- Create React App\n- Parcel 的部分使用场景\n\n但需要注意：\n\nVite 并没有完全取代 Webpack。\n\nWebpack 仍然存在，并且很多老项目和复杂项目仍然在使用 Webpack。\n\nVite 更适合现代前端项目，尤其是新项目。\n\n---\n\n## 5. 最小 Vite 项目搭建\n\n### 5.1 检查 Node.js 和 npm\n\n在命令行中运行：\n\n```bash\nnode -v\nnpm -v\n```\n\n如果能看到版本号，说明 Node.js 和 npm 已经安装成功。\n\n例如：\n\n```bash\nv24.11.0\n11.6.2\n```\n\n实际截图：\n\n![检查 Node.js 和 npm 版本](docs/images/screenshots/01-node-npm-version.png)\n\n这张截图说明：电脑已经具备运行 Vite 项目的基础环境。后续如果运行 `npm run dev` 仍然报错，通常就不是 Node.js 或 npm 没装好，而是目录不对、缺少 `package.json`，或者项目依赖没有安装。\n\n---\n\n### 5.2 创建一个最小 Vite 项目\n\n进入桌面目录：\n\n```bash\ncd C:\\Users\\Administrator\\Desktop\n```\n\n创建一个原生 JavaScript 的 Vite 项目：\n\n```bash\nnpm create vite@latest vite-demo -- --template vanilla\n```\n\n其中：\n\n```text\nvite-demo\n```\n\n是项目文件夹名称。\n\n```text\n--template vanilla\n```\n\n表示创建一个普通 JavaScript 项目，不使用 React 或 Vue。\n\n执行完成后，桌面会多出一个名为 `vite-demo` 的项目文件夹。\n\n---\n\n### 5.3 进入项目目录\n\n```bash\ncd vite-demo\n```\n\n---\n\n### 5.4 安装依赖\n\n```bash\nnpm install\n```\n\n执行后会生成：\n\n```text\nnode_modules\npackage-lock.json\n```\n\n---\n\n### 5.5 启动开发服务器\n\n```bash\nnpm run dev\n```\n\n成功后会看到类似地址：\n\n```text\nhttp://localhost:5173/\n```\n\n在浏览器中打开这个地址，就可以看到 Vite 默认页面。\n\n实际截图：\n\n![Vite 默认页面与 localhost 预览](docs/images/screenshots/02-vite-localhost-preview.png)\n\n这张截图说明：Vite 本地开发服务器已经启动成功，`localhost:5173` 是当前电脑上的本地预览地址。此时修改 `src/main.js` 或 `src/style.css`，保存后浏览器通常会自动更新。\n\n---\n\n## 6. 常用命令说明\n\n### 开发预览\n\n```bash\nnpm run dev\n```\n\n作用：\n\n启动本地开发服务器。\n\n常见地址：\n\n```text\nhttp://localhost:5173/\n```\n\n特点：\n\n- 启动快\n- 支持热更新\n- 适合开发调试\n- 不适合直接作为正式上线服务\n\n---\n\n### 构建项目\n\n```bash\nnpm run build\n```\n\n作用：\n\n将源码打包成正式上线使用的文件。\n\n默认会生成：\n\n```text\ndist\n```\n\n`dist` 文件夹中的内容才是最终可以部署到服务器的静态文件。\n\n---\n\n### 预览构建结果\n\n```bash\nnpm run preview\n```\n\n作用：\n\n本地预览 `dist` 构建结果。\n\n注意：\n\n`preview` 只是本地检查打包结果，不是正式生产服务器。\n\n---\n\n## 7. Vite 项目目录结构\n\n一个最小 Vite 项目大概如下：\n\n```text\nvite-demo\n├── index.html\n├── package.json\n├── package-lock.json\n├── node_modules\n├── public\n├── src\n│   ├── main.js\n│   └── style.css\n└── .gitignore\n```\n\n实际项目根目录截图：\n\n![Vite 项目根目录文件](docs/images/screenshots/04-root-directory-files.png)\n\n从截图可以看到，除了核心的 `src`、`index.html`、`package.json`，项目中还会有 `node_modules`、`public`、`.gitignore`、`package-lock.json` 等文件或目录。\n\n其中：\n\n- `src`：源码目录。\n- `index.html`：页面入口。\n- `package.json`：npm 项目配置和命令入口。\n- `node_modules`：依赖包目录，本地开发需要，但一般不提交到 GitHub。\n- `public`：静态资源目录。\n- `.gitignore`：告诉 Git 哪些文件不要提交。\n- `package-lock.json`：npm 依赖版本锁定文件。\n\n---\n\n## 8. 核心文件说明\n\n### 8.1 package.json\n\n`package.json` 是项目的核心配置文件。\n\n它记录了：\n\n- 项目名称\n- 项目依赖\n- 可执行命令\n- 开发工具配置\n\n常见内容：\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\"\n  },\n  \"devDependencies\": {\n    \"vite\": \"^x.x.x\"\n  }\n}\n```\n\n当运行：\n\n```bash\nnpm run dev\n```\n\nnpm 会去 `package.json` 中查找：\n\n```json\n\"dev\": \"vite\"\n```\n\n然后执行：\n\n```bash\nvite\n```\n\n如果当前目录下没有 `package.json`，就会出现类似报错：\n\n```text\nCould not read package.json\nENOENT: no such file or directory\n```\n\n这说明当前目录不是项目根目录。\n\n---\n\n### 8.2 index.html\n\n`index.html` 是 Vite 项目的入口 HTML 文件。\n\n通常包含：\n\n```html\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\u003cscript type=\"module\" src=\"/src/main.js\"\u003e\u003c/script\u003e\n```\n\n这句很关键：\n\n```html\n\u003cscript type=\"module\" src=\"/src/main.js\"\u003e\u003c/script\u003e\n```\n\n它表示页面会加载 `src/main.js` 作为 JavaScript 入口。\n\n整体关系是：\n\n```text\nindex.html\n   ↓\nsrc/main.js\n   ↓\n其他 JS、CSS、图片、组件\n```\n\n---\n\n### 8.3 src/main.js\n\n`src/main.js` 是前端项目的主要 JavaScript 入口。\n\n一个最小示例：\n\n```js\nimport './style.css'\n\ndocument.querySelector('#app').innerHTML = `\n  \u003cdiv class=\"page\"\u003e\n    \u003ch1\u003e我的第一个 Vite 项目\u003c/h1\u003e\n    \u003cp\u003e这是一个使用 Vite 创建的最小网页。\u003c/p\u003e\n    \u003cbutton id=\"btn\"\u003e点击我\u003c/button\u003e\n  \u003c/div\u003e\n`\n\ndocument.querySelector('#btn').addEventListener('click', () =\u003e {\n  alert('你好，Vite！')\n})\n```\n\n---\n\n### 8.4 src/style.css\n\n`src/style.css` 用来编写页面样式。\n\n示例：\n\n```css\nbody {\n  margin: 0;\n  font-family: Arial, sans-serif;\n  background: #f5f5f5;\n}\n\n.page {\n  padding: 60px;\n  text-align: center;\n}\n\nh1 {\n  color: #333;\n}\n\nbutton {\n  padding: 10px 20px;\n  border: none;\n  background: black;\n  color: white;\n  cursor: pointer;\n  border-radius: 6px;\n}\n```\n\n---\n\n## 9. src 和 public 的区别\n\n### src\n\n`src` 用来放源码。\n\n例如：\n\n```text\nsrc/main.js\nsrc/style.css\nsrc/assets/logo.png\n```\n\n`src` 中的资源通常通过 `import` 引入：\n\n```js\nimport './style.css'\nimport logo from './assets/logo.png'\n```\n\n这些文件会经过 Vite 处理、优化和打包。\n\n---\n\n### public\n\n`public` 用来放静态资源。\n\n例如：\n\n```text\npublic/logo.png\npublic/favicon.ico\n```\n\n引用方式：\n\n```html\n\u003cimg src=\"/logo.png\"\u003e\n```\n\n`public` 中的文件不会被 Vite 特殊处理，通常会原样复制到最终构建结果中。\n\n---\n\n### src 与 public 对比\n\n| 目录 | 是否参与构建处理 | 常见引用方式 | 适合放什么 |\n|---|---|---|---|\n| src | 是 | `import` | JS、CSS、组件、参与打包的图片 |\n| public | 否，通常原样复制 | `/文件名` | favicon、固定静态文件、不会被处理的资源 |\n\n---\n\n## 10. node_modules 可以删除吗？\n\n`node_modules` 是 npm 下载的依赖包目录。\n\n本地开发时需要它。\n\n可以删除，但删除后必须重新执行：\n\n```bash\nnpm install\n```\n\n一般情况：\n\n| 场景 | 是否需要 node_modules |\n|---|---|\n| 本地开发 | 需要 |\n| 上传 GitHub | 不需要 |\n| 发给别人 | 通常不需要 |\n| 依赖出问题时 | 可以删除后重新安装 |\n\n通常 `.gitignore` 会排除：\n\n```text\nnode_modules\n```\n\n---\n\n## 11. package-lock.json 可以删除吗？\n\n`package-lock.json` 是 npm 自动生成的依赖锁定文件。\n\n它的作用是：\n\n\u003e 尽量保证不同电脑、不同时间安装到一致的依赖版本。\n\n可以删除，但不建议随意删除。\n\n删除后执行：\n\n```bash\nnpm install\n```\n\n会重新生成。\n\n---\n\n## 12. .gitignore 是什么？\n\n`.gitignore` 用来告诉 Git 哪些文件不要提交到仓库。\n\n常见内容：\n\n```text\nnode_modules\ndist\n.env\n```\n\n建议保留 `.gitignore`。\n\n特别是：\n\n```text\nnode_modules\n```\n\n通常不应该提交到 GitHub。\n\n---\n\n## 13. public 可以删除吗？\n\n如果项目没有使用 `public` 中的资源，可以删除。\n\n例如，如果 `main.js` 或 `index.html` 中没有引用：\n\n```text\n/vite.svg\n```\n\n那么默认的 `public/vite.svg` 可以删除。\n\n判断原则：\n\n\u003e 如果没有任何代码引用它，就可以删除。\n\n结合项目根目录截图：\n\n![根目录中 public、node_modules、package-lock 等文件](docs/images/screenshots/04-root-directory-files.png)\n\n建议初学阶段保留 `.gitignore`、`package-lock.json` 和 `node_modules`，如果确认没有使用 `/vite.svg`，可以删除 `public` 中的默认示例资源。\n\n---\n\n## 14. src 中的默认文件可以删除吗？\n\nVite 默认项目里可能包含：\n\n```text\nsrc/assets\nsrc/counter.js\nsrc/main.js\nsrc/style.css\n```\n\n实际截图：\n\n![src 目录中的默认文件](docs/images/screenshots/03-src-default-files.png)\n\n其中：\n\n- `main.js` 是入口文件，不要删除。\n- `style.css` 是样式文件，可以保留。\n- `counter.js` 是默认示例代码，可以删除。\n- `assets` 是默认资源目录，如果没有引用，也可以删除。\n\n删除前需要检查 `main.js` 中是否还有类似代码：\n\n```js\nimport javascriptLogo from './assets/javascript.svg'\nimport { setupCounter } from './counter.js'\n```\n\n如果还有引用，就不能直接删除。\n\n应先删除对应的 `import` 代码，再删除文件。\n\n推荐顺序：\n\n1. 先修改 `src/main.js`，删除对 `assets` 和 `counter.js` 的引用。\n2. 保存后确认浏览器页面正常。\n3. 再删除 `src/assets` 和 `src/counter.js`。\n4. 保留 `src/main.js` 和 `src/style.css`。\n\n---\n\n## 15. 开发环境和生产环境\n\n### 开发环境\n\n命令：\n\n```bash\nnpm run dev\n```\n\n特点：\n\n- 面向开发者\n- 启动快\n- 支持热更新\n- 运行在 localhost\n- 不适合直接上线\n\n常见地址：\n\n```text\nhttp://localhost:5173/\n```\n\n---\n\n### 生产环境\n\n命令：\n\n```bash\nnpm run build\n```\n\n输出：\n\n```text\ndist\n```\n\n特点：\n\n- 面向真实用户\n- 文件被压缩和优化\n- 用于部署到服务器、CDN、静态网站平台\n\n---\n\n## 16. 什么是 HMR？\n\nHMR 是 Hot Module Replacement，中文可以叫：\n\n\u003e 热模块替换\n\n简单理解：\n\n\u003e 修改代码后，浏览器页面可以自动更新，而且不一定需要整页刷新。\n\n例如修改 CSS：\n\n```css\nh1 {\n  color: red;\n}\n```\n\n保存后，浏览器中的标题颜色会自动变化。\n\n这是 Vite 开发体验好的原因之一。\n\n---\n\n## 17. 什么是 ES Modules？\n\nES Modules 是现代 JavaScript 的模块系统。\n\n常见语法：\n\n```js\nimport './style.css'\nimport { add } from './math.js'\n\nexport function add(a, b) {\n  return a + b\n}\n```\n\nVite 利用了现代浏览器对 ES Modules 的支持。\n\n这也是 Vite 在开发阶段可以快速启动的重要原因。\n\n---\n\n## 18. 自己创建一个模块\n\n可以新建文件：\n\n```text\nsrc/message.js\n```\n\n内容：\n\n```js\nexport const message = '你好，Vite'\n```\n\n然后在 `main.js` 中使用：\n\n```js\nimport './style.css'\nimport { message } from './message.js'\n\ndocument.querySelector('#app').innerHTML = `\n  \u003ch1\u003e${message}\u003c/h1\u003e\n`\n```\n\n这可以帮助理解前端模块化。\n\n---\n\n## 19. Vite 和 React、Vue 的关系\n\nVite 可以用于创建不同类型的前端项目。\n\n创建原生 JavaScript 项目：\n\n```bash\nnpm create vite@latest vanilla-demo -- --template vanilla\n```\n\n创建 React 项目：\n\n```bash\nnpm create vite@latest react-demo -- --template react\n```\n\n创建 Vue 项目：\n\n```bash\nnpm create vite@latest vue-demo -- --template vue\n```\n\nVite 本身不是 React，也不是 Vue。\n\n它是帮助这些项目开发和打包的工具。\n\n---\n\n## 20. vite.config.js 是什么？\n\n当项目需要更多配置时，会使用：\n\n```text\nvite.config.js\n```\n\n例如修改开发服务器端口：\n\n```js\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  server: {\n    port: 3000\n  }\n})\n```\n\n这样启动后地址可能变成：\n\n```text\nhttp://localhost:3000/\n```\n\n也可以配置路径别名：\n\n```js\nimport { defineConfig } from 'vite'\nimport path from 'path'\n\nexport default defineConfig({\n  resolve: {\n    alias: {\n      '@': path.resolve(__dirname, 'src')\n    }\n  }\n})\n```\n\n之后可以这样引入：\n\n```js\nimport Button from '@/components/Button.js'\n```\n\n而不是：\n\n```js\nimport Button from '../../components/Button.js'\n```\n\n---\n\n## 21. 常见报错：找不到 package.json\n\n报错示例：\n\n```text\nnpm error enoent Could not read package.json\n```\n\n原因：\n\n当前命令行所在目录不是项目根目录。\n\n错误示例：\n\n```bash\nC:\\Users\\Administrator\u003enpm run dev\n```\n\n如果 `C:\\Users\\Administrator` 下没有 `package.json`，就会报错。\n\n正确方式：\n\n```bash\ncd C:\\Users\\Administrator\\Desktop\\vite-demo\nnpm run dev\n```\n\n判断当前目录是否正确：\n\n```bash\ndir\n```\n\n如果能看到：\n\n```text\npackage.json\n```\n\n说明当前目录是项目根目录。\n\n排查顺序：\n\n1. 运行 `dir`，看当前目录有没有 `package.json`。\n2. 如果没有，运行 `dir /s package.json` 搜索它的位置。\n3. `cd` 到真正包含 `package.json` 的目录。\n4. 再运行 `npm install` 和 `npm run dev`。\n\n---\n\n## 22. 最小源码结构\n\n理论上，一个非常小的 Vite 项目可以只关注：\n\n```text\nvite-demo\n├── index.html\n├── package.json\n└── src\n    ├── main.js\n    └── style.css\n```\n\n但实际本地开发中通常还会有：\n\n```text\nnode_modules\npackage-lock.json\n.gitignore\n```\n\n推荐初学阶段保留：\n\n```text\nvite-demo\n├── index.html\n├── package.json\n├── package-lock.json\n├── node_modules\n├── src\n│   ├── main.js\n│   └── style.css\n└── .gitignore\n```\n\n如果确认没有使用 `public` 中的资源，可以删除 `public`。\n\n---\n\n## 23. 推荐仓库目录结构\n\n后续可以逐步扩展为：\n\n```text\nvite-learning-notes\n├── README.md\n├── CHANGELOG.md\n├── docs\n│   └── images\n│       └── screenshots\n│           ├── 01-node-npm-version.png\n│           ├── 02-vite-localhost-preview.png\n│           ├── 03-src-default-files.png\n│           └── 04-root-directory-files.png\n├── notes\n│   ├── README.md\n│   ├── 01-vite-basic.md\n│   ├── 02-project-structure.md\n│   ├── 03-npm-and-package-json.md\n│   ├── 04-dev-build-preview.md\n│   ├── 05-src-vs-public.md\n│   ├── 06-vite-config.md\n│   ├── 07-vite-vs-webpack.md\n│   └── 08-common-errors.md\n├── examples\n│   ├── README.md\n│   ├── 01-vanilla-basic\n│   ├── 02-vanilla-modules\n│   ├── 03-vanilla-counter-state\n│   ├── 04-src-vs-public-assets\n│   ├── 05-vite-config-and-env\n│   ├── 06-vanilla-todo-localstorage\n│   ├── 07-react-basic\n│   └── 08-vue-basic\n└── .gitignore\n```\n\nREADME 可以作为总入口，详细内容可以逐步拆分到 `notes` 文件夹。\n\n---\n\n## 24. 示例项目运行入口\n\n`v0.1.2` 开始，仓库中新增了可以直接运行和测试的示例项目，统一放在 `examples` 目录。\n\n建议先从原生 JavaScript 示例开始，再进入 React 和 Vue 示例：\n\n```text\nexamples\n├── 01-vanilla-basic\n├── 02-vanilla-modules\n├── 03-vanilla-counter-state\n├── 04-src-vs-public-assets\n├── 05-vite-config-and-env\n├── 06-vanilla-todo-localstorage\n├── 07-react-basic\n└── 08-vue-basic\n```\n\n每个示例项目都可以独立运行。通用步骤：\n\n```bash\ncd examples/示例项目目录\nnpm install\nnpm run dev\n```\n\n常用测试命令：\n\n```bash\nnpm run build\nnpm run preview\n```\n\n示例项目的详细说明见：[`examples/README.md`](examples/README.md)。\n\n学习笔记的详细目录见：[`notes/README.md`](notes/README.md)。\n\n---\n\n## 25. 推荐学习路线\n\n### 第一阶段：基础使用\n\n- 理解 Vite 是什么\n- 会创建项目\n- 会运行开发服务器\n- 会修改 `main.js`\n- 会修改 `style.css`\n- 会打包生成 `dist`\n\n### 第二阶段：项目结构\n\n- 理解 `package.json`\n- 理解 `index.html`\n- 理解 `src`\n- 理解 `public`\n- 理解 `node_modules`\n- 理解 `package-lock.json`\n- 理解 `.gitignore`\n\n### 第三阶段：模块化\n\n- 学习 `import`\n- 学习 `export`\n- 拆分多个 JS 文件\n- 管理图片、CSS、工具函数\n\n### 第四阶段：构建与部署\n\n- 理解 `npm run build`\n- 理解 `dist`\n- 部署到静态服务器\n- 部署到 GitHub Pages\n- 部署到 Netlify 或 Vercel\n\n### 第五阶段：框架结合\n\n- Vite + Vue\n- Vite + React\n- Vite + TypeScript\n- Vite + Tailwind CSS\n\n### 第六阶段：深入原理\n\n- ES Modules\n- HMR 原理\n- 开发服务器原理\n- 依赖预构建\n- Rollup 打包\n- 插件系统\n- 环境变量\n- 路径别名\n- 多页面应用\n- 库模式构建\n\n---\n\n## 26. 后续计划\n\n本仓库后续会继续补充：\n\n- Vite 配置详解\n- Vite 与 Webpack 对比\n- Vite 项目部署方法\n- Vite + React 示例\n- Vite + Vue 示例\n- Vite + TypeScript 示例\n- Vite + Tailwind CSS 示例\n- Vite 插件机制\n- Vite 构建优化\n- Vite 常见错误排查\n- 实际项目案例\n\n---\n\n## 27. 当前理解总结\n\n目前对 Vite 的理解可以总结为：\n\n\u003e Vite 是现代前端项目的开发服务器和打包工具。  \n\u003e 开发时，它帮助我们快速启动项目，并通过热更新提升开发体验。  \n\u003e 上线前，它帮助我们将源码构建成 `dist` 文件夹中的静态资源。  \n\u003e 它不替代 Node.js、npm、React 或 Vue，而是运行在 Node.js 之上，配合 npm 管理依赖，并服务于各种前端项目。\n\n---\n\n## License\n\n本仓库主要用于个人学习记录，可自由参考。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fvite-learning-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoowinit%2Fvite-learning-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fvite-learning-notes/lists"}