首页 前端知识 npm下载及离线安装

npm下载及离线安装

2024-09-08 02:09:25 前端知识 前端哥 654 606 我要收藏

文章目录

  • 一、npm联网下载
  • 二、npm离线测试安装
  • 三、npm实际离线安装问题
  • 四、成功

一、npm联网下载

  1. 确认联网机和离线机的node和npm版本是否一致。
  • win+R,cmd,运行命令提示符:
// 查看node版本
node -v 

// 查看npm版本
npm -v

在这里插入图片描述

  1. 下载
  • 新建一个文件夹(NpmPack),用于存放下载的包。
// 通过命令提示符(手动新建也一样)
mkdir NpmPack

在这里插入图片描述

  • 根据需要,下载需要的包。
npm install <pack_name>

// 例:
npm install vue-qr
// 因为需要下载好几个包,我又新建了一个vue-qr文件夹,用于存放下载的vue-qr包

下载成功如下图:在这里插入图片描述

此时,文件夹内多了一下文件夹和文件在这里插入图片描述

  • 生成.tgz文件,离线安装时,需要用它安装
npm pack <pack_name>

// 例:
npm pack vue-qr

在这里插入图片描述
在这里插入图片描述
vue-qr-4.0.9.tgz文件同样存放于vue-qr文件夹内。
在这里插入图片描述

二、npm离线测试安装

  1. 离线安装
    断网测试(还没有在另一台离线机子上测试)。
// npm install path\pack_name-version.tgz
// 如下:
npm install E:\Code\Java\Environment\NpmPack\vue-qr\vue-qr-4.0.9.tgz

在这里插入图片描述
本机(联网机)离线安装测试成功。

三、npm实际离线安装问题

联网机离线测试安装后,尝试在无网络的机子上进行安装,遇到了一下问题:

  1. 第一次尝试安装-失败
This version of npm is compatible with lockfileVersion@1, 
but package-lock.json was generated for lockfileVersion@2. 
I’ll try to do my best with it!

即:
npm WARN read-shrinkwrap 这个版本的 npm 兼容 lockfileVersion@1,
但是 package-lock.json 是为 lockfileVersion@2 生成的。
我会尽力做到最好的!
于是去看了一下2台机子的package-lock.json文件,发现:

联网机 package-lock.json

{
  "name": "ruoyi",
  "version": "3.8.7",
  "lockfileVersion": 1,
  "requires": true,
}

离线机 package-lock.json

{
  "name": "ruoyi",
  "version": "3.8.7",
  "lockfileVersion": 2,
  "requires": true,
}

当尝试直接修改离线机package-lock.json 的 lockfileVersion值,将其由2修改为1后,再次安装,仍然npm包仍然安装失败。提示信息未变。

问题1:

那有没有办法通过修改离线机的 lockfileVersion 值,使npm包顺利安装?

问题2:

同样的若依框架源代码,同样的node、npm版本,为什么在2台机子上,package-lock.json文件中>lockfileVersion会不一样?

四、成功

经历n次查找和尝试之后,终于找到了正确的方法。

从开始到这次成功,整个过程挺蛋疼的,原来只需要如下就行......

例如:vue-qr插件

  1. 下载vue-qr插件

-  // vue-qr插件下载位置位于:

..\NpmPack\vue-qr

// 需要的可能就是这个:..\NpmPack\vue-qr\node_modules\vue-qr\src\packages\vue-qr.vue
  1. 复制粘贴

-   // 若依项目文件的node_modules文件夹位置如下:

...\RuoYi-Vue-master\RuoYi-Vue-master\ruoyi-ui\node_modules

将…\NpmPack\vue-qr\node_modules文件夹下vue-qr文件夹赋值粘贴到项目文件node_modules文件夹下,完事。

  1. 引用
  import VueQr  from 'vue-qr/src/packages/vue-qr.vue';
转载请注明出处或者链接地址:https://www.qianduange.cn//article/17884.html
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!