入门 - Nuxt DevTools

安装

Nuxt DevTools 要求**Nuxt v3.9.0 或更高版本**。

自动安装

您只需要转到您的 nuxt.config 文件并将 devtools 设置为 true

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
})

Nuxt 将自动为您安装 DevTools 模块。

使用 Nuxi 安装

您可以通过转到项目根目录并运行以下命令，选择性地在每个项目中启用 Nuxt DevTools

npx nuxi@latest devtools enable

打开 DevTools 面板

重新启动您的 Nuxt 服务器并在浏览器中打开您的应用程序。点击底部的 Nuxt 图标（或按 Shift + Alt / ⇧ Shift + ⌥ Option + D）以切换 DevTools。

如果您使用 nvm 或其他 Node 版本管理器，建议您在切换 Node 版本后再次运行启用命令。

类似地，您可以通过运行以下命令在每个项目中禁用它

npx nuxi@latest devtools disable

手动安装

Nuxt DevTools 目前作为模块提供（将来可能会更改）。如果您愿意，也可以在本地安装它，这将为您的所有团队成员激活它。

npm i -D @nuxt/devtools

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxt/devtools',
  ],
})

边缘发布通道

与 Nuxt 的边缘通道类似，DevTools 还提供边缘发布通道，该通道会自动为 main 分支的每次提交发布。

您可以通过运行以下命令选择加入边缘发布通道

{
  "devDependencies": {
--    "@nuxt/devtools": "^0.1.0"
++    "@nuxt/devtools": "npm:@nuxt/devtools-edge@latest"
  }
}

删除 lockfile (package-lock.json、yarn.lock 或 pnpm-lock.yaml) 并重新安装依赖项。

模块选项

要配置 Nuxt DevTools，您可以传递 devtools 选项。

nuxt.config.ts

export default defineNuxtConfig({
  devtools: {
    // Enable devtools (default: true)
    enabled: true,
    // VS Code Server options
    vscode: {},
    // ...other options
  }
})

有关所有可用选项，请参阅 IDE 中的 TSDocs 或类型定义文件。