VueJS如何合并两个SFC项目 解决node_modules依赖报错

两个独立SFC Vue项目的node_modules依赖目录是完全隔离的，Node.js解析依赖时默认只会从当前运行项目的根目录开始向上查找依赖包，不会跨文件夹读取其他项目的依赖。你将A项目的业务代码复制到B项目的App.vue中，但B项目本身没有安装代码里引用的第三方包，就会触发依赖缺失报错。

• 选定一个项目作为最终运行的主项目（可以选已经写完核心业务逻辑的图表项目，也可以选侧边栏项目，全程只在这个主项目里改代码，不要两个项目来回切换复制）
• 打开主项目根目录的终端，执行对应包管理工具的安装命令，把两个需要的依赖都装到主项目里：
  • 用npm的话执行：npm install vue-google-charts vue-sidebar-menu
  • 用yarn的话执行：yarn add vue-google-charts vue-sidebar-menu
  • 用pnpm的话执行：pnpm add vue-google-charts vue-sidebar-menu
• 安装完成后，在主项目的App.vue里按标准方式引入组件，不要写带其他项目路径的import语句，参考基础用法：

<template>
  <div class="app-container">
    <!-- 侧边栏菜单组件 -->
    <SidebarMenu :menu="menuList" />
    <!-- 谷歌图表组件 -->
    <GChart
      :type="chartType"
      :data="chartData"
      :options="chartOptions"
    />
  </div>
</template>

<script setup>
// 直接从当前项目安装的依赖中引入
import { SidebarMenu } from 'vue-sidebar-menu'
// 别忘了引入组件自带的样式文件
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
import { GChart } from 'vue-google-charts'

// 下方写你自己的菜单配置、图表数据等业务逻辑即可
const menuList = []
const chartType = 'ColumnChart'
const chartData = []
const chartOptions = {}
</script>

• 如果安装依赖后还是报缓存类的解析错误，直接删掉主项目下的node_modules文件夹和对应的锁文件（npm对应package-lock.json、yarn对应yarn.lock、pnpm对应pnpm-lock.yaml），重新执行依赖安装命令，重启本地开发服务即可。

1. 不要手动复制其他项目node_modules里的包到当前项目，也不要在import时写跨项目目录的依赖路径，这类操作会引发大量路径解析错误、依赖版本冲突问题，所有第三方依赖必须通过包管理工具安装到当前运行项目的依赖列表中。
2. 安装依赖时注意版本适配：如果你的主项目是Vue2，要选择支持Vue2的依赖版本；如果是Vue3，要安装适配Vue3的版本，避免出现组件无法渲染、生命周期报错等兼容性问题。

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