Nuxt3 学习笔记-指南

360 阅读3分钟

Middleware

路由中间件有三种:

  1. 匿名(或内联)路由中间件,直接在使用它们的页面中定义。
  2. 命名路由中间件,放置在middleware/ 目录中,在页面上使用时会通过异步导入自动加载。(注意:路由中间件名称被规范化为串串形式,因此someMiddleware 变成 some-middleware。)
  3. 全局路由中间件,放置在 middleware/目录中(带有.global后缀),并将在每次路由更改时自动运行。

前两种路由中间件可以definePageMeta中定义

<script setup>definePageMeta({  middleware: ["auth"]  // or middleware: 'auth'})</script>

Pages 目录

Nuxt提供了一个基于文件的路由,在您的web应用程序中使用Vue Router在底层创建路由。

Pages必须有一个根元素,以允许页面之间的路由transitions。(HTML注释也被认为是元素。)

If you need a catch-all route, you create it by using a file named like [...slug].vue. This will match all routes under that path. 如果您需要一个全方位的路由,您可以使用一个名为[...slug].vue的文件来创建它。这将匹配该路径下的所有路由。

可以使用 <NuxtPage>来显示嵌套路由

你可能想在你的应用程序中为每个路由定义元数据。你可以使用definePageMeta宏来实现这一点,它将在<script><script setup>中工作:

Plugins 目录

Nuxt自动读取您的plugins目录中的文件,并在创建Vue应用程序时加载它们。你可以在文件名中使用.server.client后缀来只在服务器端或客户端加载插件。

Public 目录

public/目录直接服务于服务器根目录,包含必须保留其名称的公共文件(例如:robots.txt)或可能不会更改(例如:favicon.ico)。

Server 目录

Nuxt自动扫描~/server/api, ~/server/routes, 和 ~/server/middleware目录中的文件,以注册具有HMR支持的API和服务器处理程序。

每个文件都应该导出一个用defineEventHandler()定义的默认函数。

Utils 目录

utils/ 目录在整个应用程序中使用auto-imports自动导入辅助函数和其他实用程序!

.env文件

Nuxt CLI在开发模式下以及运行nuxi buildnuxi generate时内置了dotenv支持。

除了任何进程环境变量外,如果您的项目根目录中有一个.env文件,它将在构建、开发和生成时自动加载,并且在nuxt.config文件和模块中设置的任何环境变量都将可访问。

如果您想使用不同的文件 - 例如,使用.env.local.env.production - 您可以在使用nuxi时传递--dotenv标志来实现。例如:

npx nuxi dev --dotenv .env.local

App Config File

Nuxt 3提供了一个app.config配置文件公开应用程序中的响应性配置,能够在生命周期内的运行时更新它,或者使用nuxt插件并使用HMR(热模块替换)编辑它。

Runtime配置

要将配置和环境变量暴露给应用程序的其他部分,你需要在你的nuxt.config文件中定义运行时配置,使用runtimeConfig选项

export default defineNuxtConfig({  runtimeConfig: {    // The private keys which are only available within server-side    apiSecret: '123',    // Keys within public, will be also exposed to the client-side    public: {      apiBase: '/api'    }  }})

// 页面中使用
const runtimeConfig = useRuntimeConfig()console.log(runtimeConfig.apiSecret)console.log(runtimeConfig.public.apiBase)

useRuntimeConfig只在setupLifecycle Hooks 期间工作。