欢迎光临
我们一直在努力

vue项目(pnpm)迁移到无网环境开发

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后,紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

vue项目(pnpm)迁移到无网环境开发(引用链接)

由于pnpm项目依赖基于软硬连接实现,无法直接复制node_modules迁移至内网,本文提供两种迁移方案,可根据项目数量、团队协作需求选择。

  • 方式一:操作简单,适合单个pnpm项目迁移,缺点是不便更新/添加依赖,多人团队需各自重复操作。
  • 方式二:操作稍复杂,适合多个pnpm项目迁移,支持依赖更新/添加,多人团队仅需一人完成初始配置,其他人直接拉取即可。

方式一:复制外网本地依赖到内网(离线安装)

核心思路:将外网环境的pnpm依赖缓存、硬链接文件及项目代码迁移至内网,通过离线命令安装依赖。

步骤1:外网环境安装项目依赖

在联网的外网电脑上,进入项目根目录执行:

pnpm install

可使用官方源registry.npmjs.org、国内源registry.npmmirror.com或本地私库源(如localhost:8081),任意源均可。

步骤2:复制pnpm依赖缓存文件

pnpm默认缓存路径:C:\\Users\\你的用户名\\AppData\\Local\\pnpm-cache

  • 查看缓存路径命令:npm get cache
  • 将整个pnpm-cache文件夹复制到内网电脑相同路径下;
  • 该文件夹下metadata目录会按源地址分类存放依赖,如localhost+8081、registry.npmmirror.com。

步骤3:复制pnpm硬链接文件

.pnpm-store为pnpm依赖硬链接文件,隐藏属性,存放于项目代码所在磁盘根目录(如D:\\.pnpm-store),将其复制到内网电脑相同磁盘根目录。

步骤4:迁移项目代码

  • 删除外网项目根目录下的node_modules文件夹;
  • 压缩项目代码(必须包含pnpm-lock.yaml文件,用于锁定依赖版本);
  • 将压缩包复制到内网电脑并解压。
  • 步骤5:配置内网pnpm源地址

    进入内网项目根目录,设置pnpm源地址为pnpm-cache/metadata下对应缓存的源地址(与外网安装依赖时的源一致),示例:

    pnpm set registry http://localhost:8081/repository/npm-hosted/

    步骤6:离线安装依赖并运行项目

    执行离线安装命令,从本地缓存拉取依赖,无需联网:

    pnpm install –offline

    安装完成后启动项目:

    pnpm run dev

    方式二:连接内网Nexus私库下载依赖(推荐团队/多项目)

    核心思路:将外网依赖打包为tgz文件,上传至内网Nexus私库,项目直接从私库拉取依赖,支持后续依赖更新/添加。

    前提条件

    已搭建内网Nexus私库(若未搭建,需先完成Nexus安装与npm仓库创建,建议先在本地Nexus验证流程,再同步至内网Nexus)。

    步骤1:由pnpm-lock.yaml生成package-lock.json

    pnpm无原生命令生成npm的lock文件,需借助工具并修改源码实现:

  • 全局安装转换工具:npm i -g pnpm-lock-to-npm-lock
  • 找到工具安装路径:
    • 用nvm:C:\\Users\\你的用户名\\AppData\\Roaming\\nvm\\对应node版本\\node_modules\\pnpm-lock-to-npm-lock
    • 不用nvm:C:\\Users\\你的用户名\\AppData\\Roaming\\npm\\node_modules\\pnpm-lock-to-npm-lock
  • 修改源码:打开lib/createLock.js,将原有createLock方法全部替换为教程提供的createLock方法代码;
  • 生成package-lock.json:进入项目根目录执行pnpm-lock-to-npm-lock pnpm-lock.yaml
  • 注意:若pnpm版本更新导致pnpm-lock.yaml格式变化,需同步修改createLock方法代码逻辑。

    步骤2:根据package-lock.json下载依赖tgz包

    通过脚本批量遍历package-lock.json,下载所有依赖的tgz压缩包:

  • 项目根目录新建两个文件夹:nodes(存放已下载依赖,避免重复下载)、tgz(存放待下载tgz包);
  • 安装脚本依赖:pnpm i shelljs –save-dev
  • 新建npmtgz.js文件,复制教程提供的npmtgz.js脚本代码到文件中;
  • 执行脚本下载tgz包:node npmtgz.js
  • 脚本会自动跳过nodes中已存在的依赖,仅下载未存在的依赖,并输出下载日志。

    步骤3:将tgz包上传至内网Nexus私库

    先完成Nexus私库登录,再通过脚本批量上传,上传失败的依赖需手动补充上传。

    3.1 私库登录(二选一)
    • 命令行登录:npm adduser,按提示输入Nexus账号、密码、邮箱;
    • 配置文件登录:在项目根目录.npmrc中添加(_auth为账号:密码经window.btoa()加密后的结果):registry=http://localhost:8081/repository/npm-hosted2/
      _auth=加密后的字符串
      shamefully-hoist=true
    3.2 批量上传tgz包(脚本二选一)
    方案A:js脚本(npmupload.js,需安装Node.js)
  • 新建npmupload.js,复制教程提供的npmupload.js脚本代码;
  • 修改脚本中registry为内网Nexus npm仓库地址;
  • 执行上传:node npmupload.js。
  • 方案B:shell脚本(push.sh,需安装Git)
  • 新建push.sh,复制教程提供的push.sh脚本代码;
  • 修改脚本中publishRestful为内网Nexus的REST API地址、admin:123456为Nexus账号密码;
  • 执行上传:运行shell脚本即可。
  • 步骤4:配置pnpm连接内网Nexus并安装依赖

  • 项目根目录.npmrc中添加配置:auto-install-peers=false
    registry=内网Nexus npm仓库地址
  • 安装依赖:无需联网,直接从Nexus私库拉取pnpm i
  • 启动项目:pnpm run dev
  • 步骤5:后续更新/添加依赖

  • 外网环境中,在项目根目录执行pnpm add 新依赖/pnpm update 依赖名,更新pnpm-lock.yaml;
  • 重复步骤1,由新的pnpm-lock.yaml生成新的package-lock.json;
  • 重复步骤2,下载新依赖的tgz包,将原有tgz包移至nodes文件夹避免重复下载;
  • 重复步骤3,将新tgz包上传至内网Nexus私库;
  • 内网团队成员直接执行pnpm i,即可拉取更新后的依赖。
  • 注意事项

  • 迁移过程中必须保留pnpm-lock.yaml,确保内外网依赖版本一致;
  • 方式二中若tgz包上传失败,需手动在Nexus后台上传对应包;
  • 多人团队使用方式二时,需将.npmrc、相关脚本纳入项目版本管理,确保配置统一;
  • Nexus私库需开放对应权限,确保团队成员可拉取依赖。
  • 赞(0)
    未经允许不得转载:171主机测评 » vue项目(pnpm)迁移到无网环境开发
    分享到: 更多 (0)

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址