在无网络,无安装Nodejs,无node_modules,条件下启动/编译Web工程

前沿

Web端开发一直是在外网开发的,Nodejs安装,npm安装依赖很方便。无需关注依赖版本等等事宜。突然有一天领导说了为了代码安全所有代码要迁移到内网,在内网协同开发,并且在无依赖的一台全新电脑上快速启动工程,和打包工程。

环境

工程为:vite+pnpm+vue

  • "Nodejs":"21.2.0",
  • "vite": "^5.1.4",
  • "vue": "^3.4.21", 通过where node 命令查看nodejs路径,查看目录下是否有pnpm文件

如果没有则用当前nodejs中的npm 安装pnpm。

npm install -g pnpm

安装完成后会在nodejs目录中多出pnpm文件npm install pnpm

本人是有三个前端工程(同目录下),我把三个前端工程都通过 pnpm install安装完成。

默认在当前工程磁盘根目录会出现.pnpm-store目录

目录结构

迁移到内网的目录结构

注意一下文件

  • Nodev21.2.0 该文件夹为外网nodejs pnpm的包文件
  • pnpm-store 该文件夹为外网磁盘根目录下的.pnpm-store文件夹
  • ServerManage 该文件夹为前端工程
  • .pnpm-store.rar 该压缩包未pnpm-store的压缩包文件大和碎所以备份一个

下面会以ServerManage工程为例 注意一下文件

  • package.json 必须有
  • pnpm-lock.yaml 必须有
  • node_modules 安装依赖以前可以删除

批处理

批处理中主要实现了

  • 通过Nodev21.2.0中这是nodejs环境变量
  • 通过Nodev21.2.0文件中的pnpm设置pnpm_store_path的路径
  • 通过Nodev21.2.0文件中的pnpm安装依赖
  • 然后启动/编译工程

zzbuild.bat和zzserver.bat 基本一样就最后几行启动和编译不一样

zzserver.bat内容

bat 复制代码
@echo off
REM 声明采用UTF-8编码
chcp 65001
echo ----------------------------------正在启动服务管理网站服务...----------------------------------
echo ----------------------------------复制地址到浏览器中即可访问----------------------------------
REM 获取当前路径
:: 获取当前路径
set "current_path=%cd%"
:: 获取上一级路径
cd ..
SET parent_path=%cd%
:: 拼接上一级路径和Nodev21.2.0
set node_path=%parent_path%\Nodev21.2.0\
echo nodejs路径:%node_path%
set pnpm_store_path=%parent_path%\pnpm-store
echo pnpm-store路径:%pnpm_store_path%
cd %current_path%
::echo nodejs版本
::node -v
::echo pnpm版本
::pnpm -v
echo 设置环境变量-----------
set path=%path%;%node_path%
echo 设置环境变量完成
echo 自定义pnpm-store路径
call pnpm config set store-dir %pnpm_store_path%
echo 自定义pnpm-store路径完成
echo 安装依赖
call pnpm install
echo 依赖更新成功
echo 启动服务中
pnpm run dev
echo 启动服务完成
pause

zzbuild.bat内容

bat 复制代码
@echo off
REM 声明采用UTF-8编码
chcp 65001
echo ----------------------------------正在编译服务管理网站服务...----------------------------------
echo ----------------------------------编译完成后成果在dist目录中----------------------------------
REM 获取当前路径
:: 获取当前路径
set "current_path=%cd%"
:: 获取上一级路径
cd ..
SET parent_path=%cd%
:: 拼接上一级路径和Nodev21.2.0
set node_path=%parent_path%\Nodev21.2.0\
echo nodejs路径:%node_path%
set pnpm_store_path=%parent_path%\pnpm-store
echo pnpm-store路径:%pnpm_store_path%
cd %current_path%
::echo nodejs版本
::node -v
::echo pnpm版本
::pnpm -v
echo 设置环境变量-----------
set path=%path%;%node_path%
echo 设置环境变量完成
echo 自定义npm-store路径
call pnpm config set store-dir %pnpm_store_path%
echo 自定义pnpm-store路径完成
echo 安装依赖
call pnpm install
echo 依赖更新成功
echo 启动服务中
pnpm run build
echo 启动服务完成
pause

结果

最后只需要双击执行zzserver.bat即可启动服务,双击zzbuild.bat即可编译工程

注意

在安装依赖是可能会出现有些依赖没有安装上,

我是通过pnpm add text(依赖) 单独安装了一下某依赖就在pnpm-store中出现了

结言

如你有类似的需求可以参考,在上述操作中遇到任何问题可以私信我,我会第一时间回答问题。

相关推荐
原则猫8 小时前
UDP 到底怎么实现可靠的
前端
Java后端的Ai之路8 小时前
14、ReactJS - 路由(Router)
前端·react.js·状态模式
裕晟资质规划10 小时前
三类涉密资质延续时限差异分析:军工60日与集成印制3个月的边界
java·服务器·前端·网络·安全
ShineWinsu10 小时前
对于JavaScript:JavaScript基础语法的解析
开发语言·前端·javascript·面试·web·基础语法·循环
月夏10 小时前
Vue3 转 React:18 项对照表 + 5 个必踩的坑(附 7 天上手路线)
前端
广州华水科技10 小时前
单北斗GNSS位移监测系统的应用与维护解析
前端
梦曦i10 小时前
uni-storage 0.1.0 发布:TTL过期管理+多实例隔离
前端·storage·uni-app x
猫头_11 小时前
AI 流式传输工程指南:模型吐出半截 JSON,前端如何边收边渲染?
前端·javascript·llm
console.log('npc')12 小时前
第 1 章 项目概述与环境搭建
前端·人工智能·大模型
定栓12 小时前
Webpack迁到Vite第七节(二):全家桶移除 — Babel 全家桶深度分析
前端·webpack·node.js