基于verdaccio工具搭建npm私服vue组件库

大纲

1. 搭建npm私服的必要性
2. 搭建npm私服操作步骤
3. 发布私有包的过程

一、搭建npm私服的必要性

1. 下载速度更快
2. 便于管理，可以分配权限
3. 可以修改第三方包，放入我们得私服
4. 可以只在公司局域网中用，不公开

二、搭建npm私服的主要操作

1. 环境准备
   确保服务器已安装以下包：

node -v
npm -v
pm2 -v
1
2
3

2. 全局安装verdaccio

npm install verdaccio -g
verdaccio -V　　测试一下是否安装成功
1
2

3. 修改verdaccio的配置文件config.yaml

vim /root/.config/verdaccio/config.yaml
1

ps: 在对应目录下，未找到配置文件config.yaml，可执行下verdaccio命令，进行第一初始

listen:
0.0.0.0:4873
1
2

其他配置

# - localhost:4873            # default value
# - http://localhost:4873     # same thing
  - 0.0.0.0:4873              # listen on all addresses (INADDR_ANY)
# - https://example.org:4873  # if you want to use https
# - [::1]:4873                # ipv6
# - unix:/tmp/verdaccio.sock    # unix socket
1
2
3
4
5
6

4. 使用pm2启动verdaccio

可直接执行verdaccio，启动服务。

➜  Desktop verdaccio
 warn --- config file  - /Users/chenwei/.config/verdaccio/config.yaml
 warn --- "crypt" algorithm is deprecated consider switch to "bcrypt". Read more: https://github.com/verdaccio/monorepo/pull/580
 info --- plugin successfully loaded: verdaccio-htpasswd
 info --- plugin successfully loaded: verdaccio-audit
 warn --- http address - http://localhost:4873/ - verdaccio/5.18.0
1
2
3
4
5
6

以上是显示的界面信息及客户端请求记录，但是为了更好的管理服务，需要使用pm2。

pm2 start verdaccio 启动

➜  Desktop pm2 start verdaccio
[PM2] Applying action restartProcessId on app [verdaccio](ids: [ 0 ])
[PM2] [verdaccio](0) ✓
[PM2] Process successfully started
┌─────┬──────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id  │ name         │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├─────┼──────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0   │ verdaccio    │ default     │ N/A     │ fork    │ 35320    │ 0s     │ 1    │ online    │ 0%       │ 1.1mb    │ xxxxxx   │ disabled │
└─────┴──────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
1
2
3
4
5
6
7
8
9

pm2常用命令：

• pm2 start verdaccio 启动
• pm2 stop verdaccio 停止
• pm2 status verdaccio 查看状态

5. 浏览器访问：
   http://127.0.0.1:4873/

三、发布私有包的过程

1. 管切换镜像到本地npm私服

npm install -g nrm

nrm add test_mirror_name http://127.0.0.1:4873/

nrm use test_mirror_name

npm publish # 在自己要发布的包中路径下打这个命令

1
2
3
4
5
6
7
8

2. 查看发布的组件
   http://127.0.0.1:4873/
   

成功的话在你的项目里

npm install -seve-dev （vue-gitment项目名）
1