为什么 pnpm 安装的依赖在 Vue 项目里找不到模块？

Tr° 怡企提问于 2026-03-11 01:54:19 阅读 104

工具

我用 pnpm 创建了一个 Vue 3 项目，安装了 element-plus，但启动时报错说找不到模块。明明 node_modules 里有这个包，是不是 pnpm 的软链接机制导致的？

我的组件代码是这样的：

<template>
  <el-button type="primary">测试按钮</el-button>
</template>

<script setup>
import { ElButton } from 'element-plus'
</script>

我来解答赞 25 收藏

反馈

1 条解答

UE丶玉佩 Lv1

你猜对了，十有八九就是 pnpm 软链接的问题。

pnpm 的 node_modules 结构跟 npm/yarn 不一样，它用的是 content-addressable store，所有包都装在 .pnpm 目录下，然后通过软链接指向实际位置。有些打包工具或者 IDE 对这种结构的解析会出问题。

解决方案有两个：

方案一：配置 vite 的 resolve alias

在 vite.config.js 里加上这段：

resolve: {

  alias: {

    '@': '/src',

    'element-plus': 'element-plus/es'

  }

}

方案二：也是我推荐的做法，直接用自动导入

不用手动 import，每次还要记组件名，麻烦死。先装这两个插件：

pnpm add -D unplugin-vue-components unplugin-auto-import

然后在 vite.config.js 配置：

import AutoImport from 'unplugin-auto-import/vite'

import Components from 'unplugin-vue-components/vite'

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'



export default defineConfig({

  plugins: [

    AutoImport({

      resolvers: [ElementPlusResolver()],

    }),

    Components({

      resolvers: [ElementPlusResolver()],

    }),

  ],

})

配完直接用，连 import 都不用写，模板里写就行。

我之前项目踩过这个坑，后来一律用自动导入，省心。

2026-03-11 02:00