透過 100+ 個技巧的集合來學習 Nuxt！
56.4K

Import meta

了解您的程式碼在哪裡執行，使用 `import.meta`。

import.meta 物件

透過 ES 模組，您可以從匯入或編譯 ES 模組的程式碼中取得一些中繼資料。這是透過 import.meta 完成的，它是一個物件，可為您的程式碼提供此資訊。在整個 Nuxt 文件中，您可能會看到已使用程式碼片段來判斷程式碼目前是在客戶端還是伺服器端執行。

深入了解 import.meta。

執行階段（應用程式）屬性

這些值是靜態注入的，可用於 tree-shaking 您的執行階段程式碼。

屬性類型描述
import.meta.client布林值在客戶端評估時為真。
import.meta.browser布林值在客戶端評估時為真。
import.meta.server布林值在伺服器端評估時為真。
import.meta.nitro布林值在伺服器端評估時為真。
import.meta.dev布林值執行 Nuxt 開發伺服器時為真。
import.meta.test布林值在測試環境中執行時為真。
import.meta.prerender布林值在建置的預先渲染階段，於伺服器上渲染 HTML 時為真。

建構工具屬性

這些值在模組和您的 nuxt.config 中都可用。

屬性類型描述
import.meta.env物件等於 process.env
import.meta.url字串目前檔案的可解析路徑。

範例

使用 import.meta.url 解析模組內部的檔案

modules/my-module/index.ts
import { createResolver } from 'nuxt/kit'

// Resolve relative from the current file
const resolver = createResolver(import.meta.url)

export default defineNuxtModule({
  meta: { name: 'myModule' },
  setup() {
    addComponent({
      name: 'MyModuleComponent',
      // Resolves to '/modules/my-module/components/MyModuleComponent.vue'
      filePath: resolver.resolve('./components/MyModuleComponent.vue')
    })
  }
})

生命週期鉤子

Nuxt 提供強大的鉤子系統，可使用鉤子擴展幾乎每個方面。

Nuxt 設定

探索您可以在 nuxt.config.ts 檔案中使用的所有選項。