引言

unplugin-vue-components 是一款能幫助組件自動(dòng)導(dǎo)入的庫(kù)，簡(jiǎn)單點(diǎn)的說，你不需要使用import xx from 'xxx.vue' 這行語(yǔ)句也能實(shí)現(xiàn)導(dǎo)入的效果。

<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>

效果

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

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

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

問題效果

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

解決問題

刨根問底

既然組件顯示的類型是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']
  }
}

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

解決方案

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

注意： 如果您選擇了選項(xiàng)1或2并創(chuàng)建了.npmrc文件，請(qǐng)?jiān)谥筮\(yùn)行pnpm i以使用最新的配置更新node_modules。然后，重新加載工作區(qū)。自動(dòng)導(dǎo)入組件的Intellisense應(yīng)再次工作。

如果這么操作還是不行，就重啟下vscode就ok啦

以上就是詳解unplugin vue components不能識(shí)別組件自動(dòng)導(dǎo)入類型pnpm的詳細(xì)內(nèi)容，更多關(guān)于unplugin vue components組件導(dǎo)入的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論