透過 100 多個技巧的集合來學習 Nuxt！
55.5K

Import meta

了解您的程式碼使用 `import.meta` 在何處執行。

import.meta 物件

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

閱讀更多關於 import.meta 的資訊。

執行階段 (App) 屬性

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

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

建構器屬性

這些值在模組和您的 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 檔案中使用的所有選項。