ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

React 项目的启动方式

React 项目的启动方式

一、启动前先确认 3 件事(很重要)

在项目根目录(有 package.json 的地方):

1. 确认 Node 版本

node-v npm-v

一般建议

Node ≥ 18(Vite / 现代 React 很稳)

如果报错,大概率是 Node 太老

  1. 安装依赖(只做一次)
npm install

或如果项目用的是:

yarn

pnpm install

== 一定要先装依赖,否则 99% 会启动失败==

3. 看一眼 package.json

重点看这一段:

"scripts":{"dev":"...","start":"...","build":"..."}

启动命令就是从这里来的。

二、不同 React 项目的启动方式(按你项目来)

情况 1:React + Vite

最常见

npm run dev

启动后终端会显示类似:

Local:http://localhost:5173/

浏览器打开即可。

情况 2:Create React App(CRA)

npm start

默认地址:

http://localhost:3000

情况 3:Next.js(如果你见过 pages / app 目录)

npm run dev

默认:

http://localhost:3000

三、最常见启动失败原因(你可以直接对号入座)

1. react-scripts: command not found

没装依赖

npm install

2. 端口被占用

Port 3000 is already in use

解决方法:

回车选择 Y 换端口

或关掉占用端口的程序

3. Node 版本不兼容

常见报错:

error:digital envelope routines::unsupported

解决:

node-v

如果 < 16 / 18,升级

4. 用错命令(最常见新手坑)

项目类型❌ 错误✅ 正确
Vitenpm startnpm run dev
CRAnpm run devnpm start

四、秒判断项目类型的方法

在项目根目录看有没有这些文件:

文件说明
vite.config.ts/js✅ Vite
react-scripts✅ CRA
next.config.js✅ Next.js
返回列表