Middleware
路由中间件有三种:
- 匿名(或内联)路由中间件,直接在使用它们的页面中定义。
- 命名路由中间件,放置在
middleware/目录中,在页面上使用时会通过异步导入自动加载。(注意:路由中间件名称被规范化为串串形式,因此someMiddleware变成some-middleware。) - 全局路由中间件,放置在
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 build和nuxi 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只在setup或Lifecycle Hooks 期间工作。