同一仓库下两个Vue+Vite项目共享代码时出现依赖解析错误

问题分析 #

你在同一仓库下用common目录存放共享代码，webapp1/webapp2通过相对路径导入共享代码，简单场景正常，但当共享代码中引入axios这类第三方npm包后，删除node_modules重装就出现依赖解析失败的错误。

核心原因是Vite默认会从当前被解析文件的所在目录向上查找node_modules，而common目录本身没有独立的node_modules，之前能运行是因为缓存了依赖，清除缓存后Vite找不到common文件中导入的npm包，从而触发报错。

解决方案 #

方案1：将common作为本地包链接（推荐） #

把common目录当作本地npm包，通过package.json的文件依赖链接到各个web项目中，让Vite按正常包的逻辑解析依赖：

1. 在common目录下初始化package.json（若未创建）：

cd common
npm init -y

可将包名设为@your-name/common，方便区分项目依赖。

2. 在webapp1和webapp2的package.json中添加common的依赖：

"dependencies": {
  "@your-name/common": "file:../common"
}

3. 在web项目中重新安装依赖：

cd webapp1
npm install

4. 修改web项目中的导入路径，从相对路径改为包路径：

// 原相对路径导入
import { configure as configureDoAsync } from "../../common/infrastructure/doAsync";
// 改为包路径导入
import { configure as configureDoAsync } from "@your-name/common/infrastructure/doAsync";

处理后，common会被软链到web项目的node_modules中，Vite会以web项目的node_modules为基础解析common中的第三方依赖，不会再出现找不到包的问题。

方案2：配置Vite的依赖解析路径 #

如果不想修改导入路径，可直接在Vite配置中指定依赖查找目录，让Vite解析common中的导入时，到web项目的node_modules中查找：
在webapp1和webapp2的vite.config.js中添加以下配置：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    // 指定依赖查找目录，优先从当前项目的node_modules查找
    modules: ['node_modules', path.resolve(__dirname, './node_modules')]
  }
})

此方案无需修改导入路径，但需确保每个web项目都安装了common中用到的第三方包（如axios、@sentry/vue）。

方案3：使用Monorepo管理（适合多项目长期维护） #

如果仓库会长期维护多个项目，推荐用Monorepo工具统一管理依赖，比如pnpm Workspaces：

1. 在仓库根目录创建pnpm-workspace.yaml文件：

packages:
  - 'common'
  - 'webapp1'
  - 'webapp2'

2. 在根目录安装所有依赖：

pnpm install

所有项目会共享根目录的node_modules，common中用到的第三方包会被安装在根目录，各个web项目都能直接访问，同时还能统一管理版本，避免重复安装。

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