Импорт метаданных
Понять, где выполняется ваш код, можно с помощью `import.meta`.
Объект import.meta
С помощью ES-модулей вы можете получить некоторые метаданные от кода, который импортирует или компилирует ваш ES-модуль.
Это делается через import.meta, который является объектом, предоставляющим вашему коду эту информацию.
В документации по Nuxt вы можете увидеть сниппеты, которые используют эту информацию, чтобы выяснить, выполняется ли код в данный момент на клиенте или на сервере.
Runtime (App) свойства
Эти значения внедряются статически и могут быть использованы для операции tree-shaking вашего кода во время выполнения.
| Свойство | Тип | Описание |
|---|---|---|
import.meta.client | boolean | true при вычислении на клиенте. |
import.meta.browser | boolean | true при вычислении на клиенте. |
import.meta.server | boolean | true при вычислении на сервере. |
import.meta.nitro | boolean | true при вычислении на сервере. |
import.meta.dev | boolean | true при запуске в Nuxt dev server. |
import.meta.test | boolean | true при запуске в тестовом контексте. |
import.meta.prerender | boolean | true при рендеринге HTML на сервере на этапе пререндера вашей сборки. |
Свойства билдера
Эти значения доступны как в модулях, так и в вашем nuxt.config.
| Свойство | Тип | Описание |
|---|---|---|
import.meta.env | object | Равно process.env |
import.meta.url | string | Разрешимый путь для текущего файла. |
Примеры
Использование import.meta.url для разрешения файлов внутри модулей
modules/my-module/index.ts
import { createResolver } from 'nuxt/kit'
// Относительно текущего файла
const resolver = createResolver(import.meta.url)
export default defineNuxtModule({
meta: { name: 'myModule' },
setup() {
addComponent({
name: 'MyModuleComponent',
// Разрешается в '/modules/my-module/components/MyModuleComponent.vue'
filePath: resolver.resolve('./components/MyModuleComponent.vue')
})
}
})