2024 年 1 月 22 日,淘宝源 HTTPS 正式过期!还没做源替换的要注意安装时的错误信息

淘宝源镜像站:npmmirror.com/
npm.taobao.org2024 年 1 月 22 日 正式过期

建议大家 点赞、收藏 ~ 以备不时之需 ~

全文 4000 字~

前言

我们通过 npm 安装包时,默认是通过国外的服务器安装的。因此大家在安装时,经常会遇到魔法问题。解决魔法问题的方案有两种,一种是 npm 走代理,另外一种则是通过国内镜像源安装。

据我观察,大多数开发者(包括资深大牛)为了方便,常常使用 taobao 源来解决该问题。

但在最近,淘宝源出现了一些问题。

具体信息

2022 年 5 月 淘宝源发布了公告:

淘宝镜像源地址由 registry.npm.taobao.org 替换为了 registry.npmmirror.com

迄今为止,已经有接近一年半的时间了。但很多人忽略了这个新闻,因为 registry.npm.taobao.org 一直处在可用的状态,并没有说明具体废弃时间。

2024 年 1 月 22 日registry.npm.taobao.org 的 SSL 证书正式过期。因此通过安全的方式使用该源的方法已不可用。

就在今天,我在安装新包时报错:

perl 复制代码
ERR_PNPM_META_FETCH_FAIL GET https://registry.npm.taobao.org/@threlte%2Ftheatre: request to https://registry.npm.taobao.org/@threlte%2Ftheatre failed, reason: certificate has expired

这个错误的原因是 registry.npm.taobao.org 的 SSL 证书过期了。

虽然这并不意味着 taobao 源完全废弃,我们依旧可以通过关闭 SSL 严格检测来跳过该验证。但这样做的缺陷一是 HTTP 的安全性问题,二则是根本问题没有解决,也许在某一天,该域名关闭后,我们又会再次遇到该问题。

解决方案

npm

由于大家通常 npm 较为常用,因此我这里先讲讲 npm 换源问题。

  1. 清除缓存:
shell 复制代码
npm cache clean --force
  1. 首先我们会尝试直接切换,切换后安装尝试:
shell 复制代码
# 切换 npm 官方源
npm config set registry https://registry.npmjs.org

# 切换新的 taobao 源
npm config set registry https://registry.npmmirror.com

如果该操作生效,则忽略下面步骤。

  1. 然后查看项目根目录下的 .npmrc 有没有配置源地址,如果没有忽略该步,如果有请调整:
.npmrc 复制代码
# 切换 npm 官方源
registry=https://registry.npmjs.org

# 切换新的 taobao 源
registry=https://registry.npmmirror.com

如果该操作生效,则忽略下面步骤。

  1. 查看 user 目录下的 .npmrc 有没有配置好新源(理论上第一步会修改该文件的源地址,如果没有手动修改):
    路径为:用户/用户名/.npmrc
.npmrc 复制代码
# 切换 npm 官方源
registry=https://registry.npmjs.org

# 切换新的 taobao 源
registry=https://registry.npmmirror.com
  1. 修改环境变量 npm_config_registry:
    我的电脑 -> 右击 -> 属性 -> 高级 -> 环境变量 -> npm_config_registry

将该环境变量删除,或者修改为 https://registry.npmjs.orghttps://registry.npmmirror.com

nrm

这里我建议大家使用源管理工具 nrm 来管理 npm registrynrmtaobao 源的地址在很久之前就更新为了 npmirror ,因此如果你使用的 nrm 大概率不会出现该问题。

如果你使用 nrm 遇到了 SSL 问题,大概是 nrm 的版本过低,尝试通过 npm update nrm 更新 nrm 版本

下面我简单介绍下 nrm 的安装及使用。

安装

shell 复制代码
npm install -g nrm

如果你安装 nrm 遇到问题,那么大概率是你的命令行没有通过代理安装,你可以尝试换成新的 taobao 源,或者命令行开启代理。

shell 复制代码
# 请将后面的地址替换成你的代理地址,如(clash): 127.0.0.1:7890
npm config set proxy http://proxy-server.com:8080
npm config set https-proxy http://proxy-server.com:8080

使用

查看源列表:

shell 复制代码
$ nrm ls
  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

基础操作列表:

shell 复制代码
# 查看版本
nrm --version
# 查看所有源及当前源
nrm ls
# 使用源
nrm use xxx
# 添加源
nrm add <registry> <url>
# 删除源
nrm del registry
# 帮助
nrm help

pnpm

我这里项目上使用的 pnpm ,因此最先解决的也是 pnpm 的问题。它的操作于 npm 基本一致,但 pnpm 通过 npm 的操作并没有解决问题,因此多了一步重装的流程。

  1. 清除缓存:
shell 复制代码
npm cache clean --force
pnpm store prune
  1. 首先我们会尝试直接切换,切换后安装尝试:
shell 复制代码
# 切换 npm 官方源
pnpm config set registry https://registry.npmjs.org

# 切换新的 taobao 源
pnpm config set registry https://registry.npmmirror.com

如果该操作生效,则忽略下面步骤。

  1. 然后查看项目根目录下的 .npmrc 有没有配置源地址,如果没有忽略该步,如果有请调整:
.npmrc 复制代码
# 切换 npm 官方源
registry=https://registry.npmjs.org

# 切换新的 taobao 源
registry=https://registry.npmmirror.com

如果该操作生效,则忽略下面步骤。

  1. 查看 user 目录下的 .npmrc 有没有配置好新源(理论上第一步会修改该文件的源地址,如果没有手动修改):
    路径为:用户/用户名/.npmrc
.npmrc 复制代码
# 切换 npm 官方源
registry=https://registry.npmjs.org

# 切换新的 taobao 源
registry=https://registry.npmmirror.com
  1. 修改环境变量 npm_config_registry:
    我的电脑 -> 右击 -> 属性 -> 高级 -> 环境变量 -> npm_config_registry

将该环境变量删除,或者修改为 https://registry.npmjs.orghttps://registry.npmmirror.com

  1. 如果以上皆未生效,尝试重装 pnpm
shell 复制代码
# 卸载
npm uninstall -g pnpm
# 安装
npm install -g pnpm

cnpm

cnpm 我这里使用的比较少,因此如果你们 cnpm 遇到了问题,如果不能解决,我建议直接重装 cnpm

shell 复制代码
npm install -g cnpm --registry=https://registry.npmmirror.com

关闭严格检查(最简单)

最简单的方案就是关闭严格检查。但我并不建议你这么做,因此放在了最后一条。

关闭严格检查有两个缺陷:

  • HTTP 的安全性问题
  • 根本问题没有解决,也许在某一天,该域名关闭后,我们又会再次遇到该问题

关闭方法:

shell 复制代码
npm config set strict-ssl false

最后

最后还是建议大家多关注关注开发相关的新闻,这类新闻虽然看起来不起眼,但指不定在什么时候就给大家致命一击 ~

相关推荐
优雅永不过时·33 分钟前
Three.js 原生 实现 react-three-fiber drei 的 磨砂反射的效果
前端·javascript·react.js·webgl·threejs·three
神夜大侠3 小时前
VUE 实现公告无缝循环滚动
前端·javascript·vue.js
明辉光焱3 小时前
【Electron】Electron Forge如何支持Element plus?
前端·javascript·vue.js·electron·node.js
杨荧6 小时前
【JAVA毕业设计】基于Vue和SpringBoot的宠物咖啡馆平台
java·开发语言·jvm·vue.js·spring boot·spring cloud·开源
NoloveisGod7 小时前
Vue的基础使用
前端·javascript·vue.js
GISer_Jing7 小时前
前端系统设计面试题(二)Javascript\Vue
前端·javascript·vue.js
理想不理想v8 小时前
使用JS实现文件流转换excel?
java·前端·javascript·css·vue.js·spring·面试
EasyNTS8 小时前
无插件H5播放器EasyPlayer.js网页web无插件播放器vue和react详细介绍
前端·javascript·vue.js
老码沉思录8 小时前
React Native 全栈开发实战班 - 数据管理与状态之Zustand应用
javascript·react native·react.js
老码沉思录8 小时前
React Native 全栈开发实战班 :数据管理与状态之React Hooks 基础
javascript·react native·react.js