nuxt3使用记录

2025-03-09

字数统计: 448字 | 阅读时长≈ 1分

一、前言

nuxt3是一个基于vue3的web全栈开发框架，后端默认使用nitro。nuxt3很强大，功能相当丰富，如果文档没看全，开发过程就会有很多问题。

二、知识点”坑点”

1. 目录结构有特殊的约定规则

命名不能变，目录参考：nuxt3目录结构
plugins目录下第一层会自动加载，多层级要手动加载插件：plugins目录说明

2. server/api目录存放后端api

api地址和文件命名相关联，包括http请求类型，下面是请求api地址和对应目录文件关联

Get /api/hello -> server/api/hello.ts
Post /api/hello -> server/api/hello.post.ts
Put /api/hello -> server/api/hello.put.ts
Get /api/message/test -> server/api/message/test.ts

未匹配的路由，当前层级覆盖 -> server/api/[...].ts

参数路由 -> server/api/[name].ts

export default defineEventHandler((event) => {
  const name = getRouterParam(event, 'name')
  return { message: `hello ${name}` }
})

3. 配置很丰富，根目录的nuxt.config.ts基本涵盖所有模块的配置

下面是主要的模块配置

app: 应用配置，包括根地址，前端head块加载的link、meta信息
nitro: nitro服务端配置，包括ssg要抓取的路由，部署的预设平台
runtimeConfig: 运行配置，可放置公开的配置和仅服务端使用的配置
vite: vite构建配置

4. SSR渲染阶段调用浏览器对象属性

用过nuxt3,我想大概率会遇到下面这个错误，在SSR时，某些组件使用了浏览器对象属性。这个问题也有可能是依赖组件在某些node环境下的bug，例如我之前使用nodeV22版本跑就会出现，其它正常的情况可以使用nuxt3内置组件解决

nuxt3-ssr-500

— 未完待续 —

本文作者： 暮秋人
本文链接： https://muqiuren.pages.dev/2025/03/nuxt3-knowledge/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！