从零搭建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 安装生产依赖-S4.3 安装开发依赖-D4.4 依赖安装后生成的文件夹五、第四步本地开发运行项目5.1 前端项目Vue/React/Vite5.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 安装生产依赖-Snpminstall包名-S# 示例npm install koa axios -S生产依赖项目上线运行必须用到的包比如 Koa、Vue、Axios、Redis 等。新版npm默认就是生产依赖\-S可省略但企业规范建议写上语义更清晰。4.3 安装开发依赖-Dnpminstall包名-D# 示例npm install vite sass -D开发依赖仅本地开发、打包编译使用上线后不需要的包比如打包工具、预处理器、校验工具等。4.4 依赖安装后生成的文件夹执行install后会生成node\_modules文件夹存放所有依赖源码禁止提交Git体积庞大且可通过命令重新安装。五、第四步本地开发运行项目根据项目类型执行对应启动命令所有命令均配置在 package.json 的 scripts 中。5.1 前端项目Vue/React/Vitenpmrun dev启动本地开发服务器localhost:5173/3000支持热更新、接口代理、模块化语法绝对不能直接双击打开index.html运行。5.2 Node后端项目Koa/NestJSnodeindex.js# 或配置脚本后执行npmrun dev启动本地后端服务监听对应端口提供接口服务。六、第五步项目打包上线前必做本地开发完成后必须打包打包后的文件才是可上线的生产文件。6.1 打包命令通用npmrun build6.2 打包核心作用压缩、混淆代码减小文件体积提升访问速度去除开发冗余代码只保留生产运行代码文件名添加hash值解决浏览器缓存问题统一编译浏览器/Node可识别语法6.3 打包产物执行命令后生成dist 文件夹这是项目唯一可上线的静态资源/生产文件。6.4 打包后本地预览避坑必备npmrun preview本地模拟线上环境检查打包后是否存在样式错乱、接口报错、路由404等问题没问题再上线。七、第六步项目部署上线企业三大主流方案前端项目和Node后端项目必须分开部署、分开上线这是生产环境硬性规范。7.1 前端项目部署dist静态文件前端打包产物是纯静态文件无需运行环境三种上线方式方案1Nginx部署企业物理/云服务器上传dist文件到服务器配置Nginx反向代理、路由兜底适配线上访问方案2OSS/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.jsonnode_modules 禁止提交Git可配置 .gitignore 忽略开发依赖和生产依赖严格区分避免线上包体积冗余前端禁止直接双击index.html运行必须依托开发服务器后端上线必须用PM2禁止直接 node index.js 运行终端关闭服务即停上线前必须预览打包产物避免本地正常、线上报错