Vite + React 项目学习笔记
一、项目初始化
1. 创建项目
bash
npm create vite@latest my-app -- --template react
cd my-app
npm install
2. 启动开发服务器
bash
npm run dev
3. 构建生产版本
bash
npm run build
4. 预览生产构建
bash
npm run preview
二、项目目录结构解析
text
my-app/
├── node_modules/ # 项目依赖包（自动生成，不手动修改）
├── public/ # 公共静态资源（不经过构建处理）
├── src/ # 源代码目录
├── index.html # 入口 HTML 文件
├── package.json # 项目配置与依赖管理
├── package-lock.json # 依赖锁定文件
├── README.md # 项目说明文件
└── vite.config.js # Vite 配置文件
1. node_modules/
存放所有通过 npm 安装的依赖包
不提交到版本控制系统（应在 .gitignore 中忽略）
2. public/
存放静态资源，如 favicon.ico、robots.txt 等
资源会被直接复制到构建输出目录，不经过 Vite 处理
引用方式：/文件名.扩展名
3. src/
项目源代码目录，React 组件、样式、工具函数等
通常包含：
main.jsx：应用入口文件
App.jsx：根组件
assets/：图片、字体等
components/：可复用组件
pages/：页面级组件
styles/：CSS 或 CSS 模块文件
4. index.html
项目的主页面模板
Vite 会将其作为入口，自动注入构建后的脚本和样式
示例：
html
核心字段：
name：项目名称
version：版本号
scripts：自定义命令
dependencies：生产环境依赖
devDependencies：开发环境依赖
示例：
json
{
"name": "my-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.0.0",
"vite": "^4.0.0"
}
}
6. package-lock.json
锁定依赖的精确版本号，保证环境一致性
自动生成，不要手动编辑
7. README.md
项目说明文档，推荐包含：
项目简介
安装与运行步骤
目录结构说明
构建与部署方式
8. vite.config.js
Vite 构建工具的核心配置文件
支持插件、路径别名、代理等配置
示例：
javascript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': '/src',
},
},
server: {
port: 3000,
open: true,
},
})
三、常用 npm 脚本说明
命令 说明
npm run dev 启动开发服务器（支持热更新）
npm run build 打包项目到 dist 目录
npm run preview 本地预览生产构建结果
npm install 安装所有依赖
npm install <包名> 添加特定依赖
四、开发流程建议
在 src/ 下按功能模块组织组件与页面
使用 public/ 存放不需构建处理的静态资源
配置 vite.config.js 中的路径别名，提升开发体验
使用 ESLint + Prettier 保持代码规范
提交代码前确保 node_modules/ 被 .gitignore 忽略
五、常见问题
Q1：修改 vite.config.js 后需要重启服务吗？
✅ 是的，需要重启开发服务器。
Q2：如何在项目中使用 CSS 预处理器？
bash
npm install -D sass
然后将 .css 文件改为 .scss 或 .sass 即可。
Q3：如何配置环境变量？
在项目根目录创建 .env 文件，变量名需以 VITE_ 开头：
text
VITE_API_URL=https://api.example.com
代码中通过 import.meta.env.VITE_API_URL 访问。
浙公网安备 33010602011771号