从零搭建Node.js/前端项目全流程（初始化→依赖安装→打包→部署上线 企业标准流程）
文章目录
- 前言
- 一、第一步：安装Node.js（所有项目的基础环境）
- 1.1 安装原则（企业通用）
- 1.2 安装后校验（必做）
- 1.3 可选优化（国内开发必备）
- 二、第二步：初始化项目（生成项目核心配置文件）
- 2.1 新建项目文件夹
- 2.2 项目初始化命令
- 2.3 命令作用详解
- 三、核心知识点：package.json 与 package-lock.json（必懂）
- 3.1 package.json（项目说明书）
- 3.2 package-lock.json（依赖快照锁文件）
- 3.3 两者核心区别一句话
- 四、第三步：安装项目依赖（npm install 全场景详解）
- 4.1 安装所有项目依赖（拉取他人项目必备）
- 4.2 安装生产依赖（-S）
- 4.3 安装开发依赖（-D）
- 4.4 依赖安装后生成的文件夹
- 五、第四步：本地开发运行项目
- 5.1 前端项目（Vue/React/Vite）
- 5.2 Node后端项目（Koa/NestJS）
- 六、第五步：项目打包（上线前必做）
- 6.1 打包命令（通用）
- 6.2 打包核心作用
- 6.3 打包产物
- 6.4 打包后本地预览（避坑必备）
- 七、第六步：项目部署上线（企业三大主流方案）
- 7.1 前端项目部署（dist静态文件）
- 7.2 Node后端项目部署（Koa/NestJS）
- 八、企业生产全套标准流程总结
- 九、新手生产避坑重点
前言
本文覆盖所有前端、Node后端项目通用完整流程，不管是Vue/React前端项目，还是Koa/NestJS后端项目，底层初始化、依赖管理、打包、部署逻辑完全通用。全程为生产级标准操作，无多余花哨步骤，新手可直接照着落地。
一、第一步：安装Node.js（所有项目的基础环境）
1.1 安装原则（企业通用）
永远安装LTS 长期稳定版，禁止用最新尝鲜版，避免项目依赖兼容报错。
下载地址：Node.js 官网（国内可选用淘宝镜像源加速）
1.2 安装后校验（必做）
打开终端（CMD/终端/Git Bash），输入以下命令，输出版本号即安装成功：
node-vnpm-v1.3 可选优化（国内开发必备）
默认npm官方源速度慢，切换淘宝镜像源，提升依赖下载速度：
npmconfigsetregistry https://registry.npmmirror.com二、第二步：初始化项目（生成项目核心配置文件）
2.1 新建项目文件夹
新建空文件夹（自定义项目名），终端进入项目根目录，所有命令必须在根目录执行。
2.2 项目初始化命令
npminit-y2.3 命令作用详解
该命令会自动生成 package.json 文件，无需手动回车确认配置。
如果不加\-y，会手动弹窗确认项目名称、版本、描述等信息，日常开发统一用npm init \-y快速初始化。
三、核心知识点：package.json 与 package-lock.json（必懂）
初始化后项目会生成两个核心文件，90%新手都会混淆，以下是生产级精准区别：
3.1 package.json（项目说明书）
作用：记录项目基本信息、脚本命令、依赖版本范围
内容特点：依赖版本是范围版本（如
^3\.3\.0），允许兼容小版本升级可手动修改：可改项目名称、启动脚本、新增/删除依赖
必须提交Git
核心包含：scripts（启动/打包命令）、dependencies（生产依赖）、devDependencies（开发依赖）
3.2 package-lock.json（依赖快照锁文件）
作用：锁定当前项目所有依赖的精确版本、下载地址、哈希校验值
内容特点：固定每一个依赖的具体版本，杜绝“本地能跑、线上报错”的版本不一致问题
禁止手动修改：由npm自动生成、自动更新
必须提交Git：团队协作、线上部署必备
3.3 两者核心区别一句话
package.json 定范围，package-lock.json 定死版本，保证所有人、所有环境依赖版本完全一致。
四、第三步：安装项目依赖（npm install 全场景详解）
依赖分两类，生产环境和开发环境，企业开发严格区分，不能混用。
4.1 安装所有项目依赖（拉取他人项目必备）
克隆别人的项目、重启项目、拉取最新代码后，必须执行：
npminstall作用：根据package\.json和package\-lock\.json，精准安装项目所有依赖，还原项目运行环境。
4.2 安装生产依赖（-S）
npminstall包名-S# 示例：npm install koa axios -S生产依赖：项目上线运行必须用到的包，比如 Koa、Vue、Axios、Redis 等。
新版npm默认就是生产依赖，\-S可省略，但企业规范建议写上，语义更清晰。
4.3 安装开发依赖（-D）
npminstall包名-D# 示例：npm install vite sass -D开发依赖：仅本地开发、打包编译使用，上线后不需要的包，比如打包工具、预处理器、校验工具等。
4.4 依赖安装后生成的文件夹
执行install后会生成node\_modules文件夹，存放所有依赖源码，禁止提交Git，体积庞大且可通过命令重新安装。
五、第四步：本地开发运行项目
根据项目类型，执行对应启动命令，所有命令均配置在 package.json 的 scripts 中。
5.1 前端项目（Vue/React/Vite）
npmrun dev启动本地开发服务器（localhost:5173/3000），支持热更新、接口代理、模块化语法，绝对不能直接双击打开index.html运行。
5.2 Node后端项目（Koa/NestJS）
nodeindex.js# 或配置脚本后执行npmrun dev启动本地后端服务，监听对应端口，提供接口服务。
六、第五步：项目打包（上线前必做）
本地开发完成后，必须打包，打包后的文件才是可上线的生产文件。
6.1 打包命令（通用）
npmrun build6.2 打包核心作用
压缩、混淆代码，减小文件体积，提升访问速度
去除开发冗余代码，只保留生产运行代码
文件名添加hash值，解决浏览器缓存问题
统一编译浏览器/Node可识别语法
6.3 打包产物
执行命令后生成dist 文件夹，这是项目唯一可上线的静态资源/生产文件。
6.4 打包后本地预览（避坑必备）
npmrun preview本地模拟线上环境，检查打包后是否存在样式错乱、接口报错、路由404等问题，没问题再上线。
七、第六步：项目部署上线（企业三大主流方案）
前端项目和Node后端项目必须分开部署、分开上线，这是生产环境硬性规范。
7.1 前端项目部署（dist静态文件）
前端打包产物是纯静态文件，无需运行环境，三种上线方式：
方案1：Nginx部署（企业物理/云服务器）：上传dist文件到服务器，配置Nginx反向代理、路由兜底，适配线上访问
方案2：OSS/CDN部署（主流）：阿里云/腾讯云OSS托管静态文件，搭配CDN加速，访问速度最快
方案3：免费平台部署（个人项目）：Vercel、Netlify，自动打包、自动HTTPS、无需服务器
7.2 Node后端项目部署（Koa/NestJS）
后端是动态服务，需要持续运行，必须用进程守护工具托管，生产统一使用PM2
# 全局安装PM2npminstallpm2-g# 启动后端服务pm2 start index.js# 开机自启、持久化保存pm2 startup pm2 savePM2核心作用：后台运行服务、终端关闭不中断、服务崩溃自动重启、记录运行日志，是Node后端上线必备工具。
八、企业生产全套标准流程总结
完整闭环流程，所有前后端、Node项目统一遵循：
安装Node.js → 切换镜像源 → 新建项目文件夹 →npm init \-y初始化 → 安装生产/开发依赖 → 本地npm run dev开发调试 →npm run build打包 →npm run preview预览校验 → 分开部署（前端静态托管/CDN，后端PM2服务器托管）→ 正式上线
九、新手生产避坑重点
禁止手动修改 package-lock.json
node_modules 禁止提交Git，可配置 .gitignore 忽略
开发依赖和生产依赖严格区分，避免线上包体积冗余
前端禁止直接双击index.html运行，必须依托开发服务器
后端上线必须用PM2，禁止直接 node index.js 运行（终端关闭服务即停）
上线前必须预览打包产物，避免本地正常、线上报错