Vue项目中npm包全局与局部安装原理详解

npm全局安装原理与路径

全局安装是指将npm包安装在Node.js安装目录下的node_modules文件夹中。在Windows和macOS系统中，全局安装的默认路径存在差异。在macOS中，默认安装路径为 /usr/locla/lib 。而在Windows系统中，默认安装目录为 C:\Program Files\nodejs 。此外，用户可以通过特定命令查看当前的全局安装路径。

// 查看全局安装路径
npm root -g
// 查看npm的基础设置
npm config ls
// 查看安装目录路径
npm config get prefix

全局安装机制

当npm包完成全局安装后，该包的命令行工具会被注册到系统全局环境中，用户即可直接在终端中调用该命令。实际上，全局安装的npm包通常存放在 /usr/locla/lib/node_modules 或 C:\Program Files\nodejs\node_modules 目录下。在该包的 package.json 文件中，通过 bin 属性配置的执行命令，会被链接或复制到 /usr/locla/bin 或 C:\Program Files\nodejs 目录中。当用户在命令行执行该命令时，系统会调用 /usr/locla/bin 目录下对应的可执行文件。

安装流程概述

以下以全局安装Vue CLI为例，简述具体的安装过程。

执行 npm install -g @vue/cli 命令，将Vue包安装至 /usr/locla/lib/node_modules 目录。

系统会查找 node_modules 目录下Vue包的package.json文件，读取其中的bin属性配置。

随后在目录 /usr/locla/bin 或 C:\Program Files\nodejs 中生成vue命令的执行文件链接。

最后在命令行中执行 vue create vue-test 命令进行项目创建。

npm局部安装与npx执行机制

局部安装机制

局部安装位置

在特定项目中执行 npm install xxx 命令，该包会被安装在该项目的 node_moduels 目录下。但如果直接尝试在项目中运行该包的命令，控制台通常会报错提示命令未找到。此时有两种解决方式：

使用npx执行包命令

"scripts": { "包命令": "包命令",}

原理说明：本地安装npm包后，该包的命令会被添加到项目的 node_modules/.bin 目录中。执行 npm run 命令 命令时，package.json中的scripts字段会按特定顺序查找对应命令的位置，本地的 node_modules/.bin 目录也在查找范围内。因此，本地安装的包命令可以通过此方式执行。

总结

以上介绍了Vue项目中npm包全局安装与局部安装的过程及原理，希望对大家有所帮助。如有任何疑问，欢迎留言交流，小编会及时回复。感谢大家对本站的支持！ 如果觉得本文对您有帮助，欢迎转载，请注明出处，谢谢！