如何在不发布至NPM的情况下向外部项目暴露Vue组件

我来给你分享几个亲测有效的方法，不用把Vue组件推到NPM仓库，就能在本地另一个项目里复用它：

1. 用npm link/yarn link做本地包链接 #

这是最常用的本地包调试方案，相当于把你的组件库“注册”到本地npm仓库，然后在目标项目里直接引用：

• 第一步：在你的组件项目根目录，先确保有package.json（没有的话跑npm init -y快速生成），然后执行：

  npm link
  

  这会把当前组件包（以package.json里的name字段为包名）添加到本地npm的全局链接中。
• 第二步：切换到要使用组件的目标项目根目录，执行：

  npm link 你的组件包名
  

• 之后在目标项目里，就可以像引入普通NPM包一样导入组件了：

  <script setup>
  import MyCustomComponent from 'your-component-package-name'
  </script>
  
  <template>
    <MyCustomComponent />
  </template>
  

  用完之后如果想解除链接，在目标项目跑npm unlink 你的组件包名，组件项目跑npm unlink即可。

2. 直接引用本地文件路径 #

如果只是快速测试，不想搞复杂的链接，直接用相对/绝对路径导入组件最省事：

<template>
  <MyLocalComponent />
</template>

<script setup>
// 这里的路径根据你的项目实际结构调整
import MyLocalComponent from '../../components-library/src/components/MyLocalComponent.vue'
</script>

注意：如果组件依赖了其他文件（比如样式、工具函数），也要确保路径能正确访问到。

3. 搭建Monorepo结构（长期复用推荐） #

如果以后你有多个组件或项目需要复用，Monorepo是更可持续的方案。比如用pnpm Workspaces、Yarn Workspaces或者Lerna来管理：

• 先把组件项目和目标项目放到同一个根目录下，结构大概是：

  my-workspace/
  ├─ packages/
  │  ├─ vue-components/  # 你的组件库
  │  └─ target-project/  # 要使用组件的项目
  

• 在根目录创建pnpm-workspace.yaml（用pnpm的话）：

  packages:
    - 'packages/*'
  

• 然后在目标项目的package.json里添加依赖：

  "dependencies": {
    "vue-components": "workspace:^"
  }
  

• 最后跑pnpm install，就能在目标项目里像正常包一样导入组件了。

4. 打包本地tar包安装 #

如果想模拟真实的包安装流程，但又不想上传到NPM，可以把组件打包成tar包，然后在目标项目里本地安装：

• 在组件项目根目录执行：

  npm pack
  

  这会生成一个类似vue-components-1.0.0.tgz的压缩包。
• 切换到目标项目根目录，安装这个本地包：

  npm install ../vue-components/vue-components-1.0.0.tgz
  

  安装完成后，组件就会出现在目标项目的node_modules里，正常导入使用即可。

一些注意事项 #

• 确保组件项目和目标项目的Vue版本兼容（比如都是Vue 3或者Vue 2），避免出现兼容性问题。
• 如果组件有第三方依赖，要么确保目标项目也安装了这些依赖，要么在组件项目里把依赖打包进去（需要调整打包配置）。
• 用npm link时如果遇到版本冲突，可以先解除链接再重新操作。

内容的提问来源于stack exchange，提问作者Frontend developer