在昨天成功安裝模組完之後，會很期待馬上想引入元件來看看是否能成功運行了吧！

我當初也是這麼想的~結果卻發現無法順利引入元件QQ (瞬間冷水潑下來)

這是我當初寫的狀況：

首先引入

import { addComponent } form '@nuxt/kit'

再來把之前寫的 <Button/> 元件新增進去

addComponent({
	name: 'button', //component 的名稱
  filePath: './runtime/components/global/button.vue' //檔案的位置 
})

一開始看起來完全沒問題啊！路徑也對了，沒道理不行吧？🤔

結果研究了一會，才發現關鍵在這裡….

注意第一次打開 module.ts 時有一行…

// module.ts
const resolver = createResolver(import.meta.url)

createResolver( ) 用來解析”相對”目前模組的路徑，即便其名稱或副檔名是未知的情況。

import.meta: ES 模組中的內建運算子，它提供關於當前模組的 URL

它們兩個組合起來就可以處理與當前模組相關的相對路徑，且無需手動拼接路徑或處理絕對/相對路徑之間的轉換。

這可真是一個救星，因為接下來的操作會經常用到它~

那麼來修正剛剛的寫法

    addComponent({
      name: 'button',
      filePath: resolver.resolve('./runtime/components/global/button.vue')
    })

有了這個小小的修正就可以引入囉! 🎉

除了以上那種寫法以外，也可以這樣寫

 addComponent({
      name: 'button',
      filePath: resolver.resolve('./runtime', 'components', 'global', 'button')
    })

這個寫法的好處是，當你不確定檔案的副檔名時，它依然可以順利幫你引入對應的元件！記得這個技巧，接下一定會用到的！ (很重要！)

———————————————————————————-

createResolver: https://nuxt.com/docs/api/kit/resolving

import.meta.url: https://nuxt.com/docs/api/advanced/import-meta