2026.6.10

Vite+React

一、项目初始化命令

1. 创建项目
   npm create vite@latest my-app --template react
   cd my-app
   npm install
2. 启动开发服务
   npm run dev
3. 打包生产文件
   npm run build
4. 本地预览打包产物
   npm run preview

二、目录结构说明

node_modules/：自动生成，存放所有项目依赖包，不手动修改

public/：静态资源文件夹，不会经过编译处理

src/：源代码目录，组件、页面、业务逻辑均放此处

index.html：项目入口HTML文件

package.json：项目配置、依赖与脚本命令管理

package-lock.json：锁定依赖版本，保证多人环境一致

README.md：项目说明文档

vite.config.js：Vite核心配置文件

三、常用npm脚本

dev：本地开发热更新服务

build：打包生成线上静态资源

preview：本地预览打包后的dist文件

四、高频问题解答

1. 修改vite.config.js后是否需要重启服务？
   需要，配置文件修改不会自动热更新，必须重启npm run dev。

2. 如何使用CSS预处理器（Sass/Less）？
   直接安装对应依赖，Vite自动识别，无需额外配置。

3. 如何配置环境变量？
   在项目根目录新建.env、.env.development、.env.production文件定义变量，通过import.meta.env读取。