PNPM Monorepo中AutoImport自动导入getSum方法报错求助

测试情况：
- 不使用PNPM软链，直接将`components`包复制到`vue-template`的`node_modules`目录，Vite可正常启动
- 改用Yarn管理Monorepo时，相同代码无异常

系统信息：

System:
OS: macOS 14.2.1
CPU: (10) arm64 Apple M1 Max
Memory: 1.29 GB / 64.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
Yarn: 1.22.21 - /opt/homebrew/bin/yarn
npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
pnpm: 8.12.1 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 120.0.6099.199
Edge: 120.0.2210.121
Safari: 17.2.1

# 解决方案
### 方法1：配置Vite别名指向本地包
在`vue-template`的`vite.config.ts`中添加路径别名，将`vue-components`指向本地`components`包的入口文件（或dist文件）：
```typescript
import path from 'path';

export default defineConfig({
  // ...其他配置
  resolve: {
    alias: {
      // 指向components包的源码入口
      'vue-components': path.resolve(__dirname, '../components/src/index.ts'),
      // 若需指向打包后的dist文件，用下面的路径
      // 'vue-components': path.resolve(__dirname, '../components/dist/vue-components.es.js'),
    },
  },
  plugins: [
    // ...其他插件
    AutoImport({
      // 保持原配置不变
      include: [
        /\.[tj]sx?$/,
        /\.vue$/,
        /\.vue\?vue/,
        /\.md$/,
      ],
      ignore: ['h'],
      imports: [
        'vue',
        {
          'vue-components': ['getSum'],
        },
      ],
      vueTemplate: true,
    }),
  ],
});

方法2：自定义AutoImport解析器 #

直接在AutoImport配置中添加自定义解析器，指定getSum的来源路径：

AutoImport({
  // ...其他配置
  include: [
    /\.[tj]sx?$/,
    /\.vue$/,
    /\.vue\?vue/,
    /\.md$/,
  ],
  ignore: ['h'],
  imports: ['vue'],
  resolvers: [
    {
      resolve: (name) => {
        // 匹配getSum方法，指向本地components包的入口
        if (name === 'getSum') {
          return { name, from: '../components/src/index.ts' };
        }
      },
    },
  ],
  vueTemplate: true,
}),

方法3：完善components包的exports配置 #

在components包的package.json中添加exports字段，明确包的入口路径，确保PNPM能正确解析：

{
  "name": "vue-components",
  "exports": {
    ".": "./dist/vue-components.es.js",
    "./src": "./src/index.ts"
  },
  // ...其他字段
}

之后保持AutoImport原配置不变，PNPM就能正确识别vue-components包的入口。

PNPM采用严格的node_modules结构，本地包通过软链关联，而Yarn会将所有依赖提升到根node_modules。当AutoImport生成import { getSum } from 'vue-components'语句时，在components包的dist文件上下文里，PNPM无法找到vue-components包（因为components包自身的node_modules中没有这个包，且PNPM不会自动提升本地包），导致解析失败。而直接复制包到node_modules或使用Yarn时，包名能被正确解析，因此不会报错。

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