詳解unplugin?vue?components不能識別組件自動導入類型pnpm

更新時間：2023年01月19日 10:24:16 作者：twinkle

這篇文章主要為大家介紹了unplugin?vue?components不能識別組件自動導入類型pnpm詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

unplugin-vue-components 是一款能幫助組件自動導入的庫，簡單點的說，你不需要使用import xx from 'xxx.vue' 這行語句也能實現(xiàn)導入的效果。

<script setup lang="ts">
import ScreenAdpter from '@compontents/ScreenAdpter/index.vue'
import Play from '@components/Play/index.vue'
</script>
<template>
    <ScreenAdpter>
        <Play></Play>
    </ScreenAdpter>
</template>
<style scoped></style>

等同于以下效果

<script setup lang="ts">
</script>
<template>
    <ScreenAdpter>
        <Play></Play>
    </ScreenAdpter>
</template>
<style scoped></style>

效果

這里需要實現(xiàn)的效果如下：

發(fā)現(xiàn)問題

但是問題來了，使用pnpm的用戶，我相信許多人是實現(xiàn)不了這上效果的??????。當所有的配置文件配好，然后就出現(xiàn)下面的效果啦?。。?/p>

問題效果

你會發(fā)現(xiàn)，在組件使用的地方的類型是any, 當你去unplugin-vue-components 這里面點擊組件是可以進去的，那么怎么來解決這個引用問題呢？

解決問題

刨根問底

既然組件顯示的類型是any,那么咱們先看下生產(chǎn)的類型聲明文件。

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
export {}
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    Play: typeof import('./components/Play/index.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    ScreenAdpter: typeof import('./components/ScreenAdpter/index.vue')['default']
  }
}

在自動生成的components.d.ts文件中的 declare module '@vue/runtime-core' 聲明，在 pnpm 中只能訪問項目的頂級依賴，而 @vue/runtime-core 是 vue 模塊下的依賴，不是頂級依賴，導致聲明語句失效。（yarn 和 npm 的 node_modules 平鋪目錄結構允許訪問所有依賴）

解決方案

?? （首選）在目錄的根目錄中創(chuàng)建或編輯.npmrc文件，并在其中添加以下行：public hoist pattern[]=@vue/runtime core
（不推薦）在目錄的根目錄中創(chuàng)建或編輯.npmrc文件，并在其中添加以下行：shamefully-hoist=true（這樣做將使所有嵌套依賴項都可用作頂級依賴項）
（不推薦）運行pnpm add@vue/runtime core -D將嵌套模塊添加為頂級依賴項。（您必須確保@vue/runtime內(nèi)核的版本與項目中安裝的vue版本相匹配。）
（不推薦）使用0.18.5版本的unplugin-vue-components組件，而不是最新版本。（之所以有效，是因為在此版本之前，unplugin-vue-components 組件將components.d.ts中的模塊聲明為“vue”。缺點是，您將錯過插件的最新更新和改進。）
（不建議）手動更新components.d.ts中的模塊聲明名稱，以聲明模塊“vue”，而不是聲明模塊“@vue/runtime core”（這很不方便，因為每當取消插入vue組件自動生成新的components.d.ts文件并覆蓋您的更改時，您都必須更新模塊名稱。）