block_xu的博客

Nuxt使用nitro，而nitro自身就支持env配置，在根目录设置.env文件就可以支持，# 预渲染打开预渲染后，Nuxt会将开启预渲染的页面渲染完毕后打包成`.html`文件，并放到静态资源目录下，当客户端请求该页面时，直接返回html文件。利用`routeRules`配置可以实现部分页面的预渲染

1. TDK（标题、描述、关键词）设置，推荐使用Nuxt的钩子useSeoMeta设置tdk。2. sitemap.xml 通过nuxt-simple-sitemap实现 3.robots.txt 通过nuxt-simple-robots实现 4.特殊配置-路由规则 Nuxt支持一个项目中不同的页面使用不同的渲染模式，比如一个SEO项目中，可能某些页面不需要SSR（如注册页、admin页等），可以通过配置路由规则，以混合渲染的方式实现整个项目

国际化页面配置成静态渲染（预渲染）页面，该选项会在打包时将页面预渲染成默认语言的html文件，访问该页面时服务端会直接返回当前html（因为与渲染会将函数执行，导致服务端返回的一直是默认语言的页面），最终导致页面语言和排版混乱。：cookie中没有设置值的话，默认使用此致（并不是默认。对应的值的效果，他会偶尔抽风，错误的去设置默认。总是重定向到存储在cookie中的值，：支持的语言列表，可以是数组或对象。：（必填）-区域设置的唯一标识符。需求允许的情况下，修改后调用。在需要切换国际化时，通过

Nuxt 3提供了钩子，允许完全更改Nuxt自动生成的路由，我们可以通过该钩子实现vue-router路由方案（适合老项目迁移，并不是很推荐这样用）首先创建文件path: "",meta: {},...创建钩子函数hooks: {// 清空Nuxt.js自动生成的路由// // 重新将自定义路由配置设置进去},},})

#配置跨域 本地的反向代理我们可以通过Nitro引擎来配置服务器请求没有跨域，也就不需要配置代理转发。#接口封装 nuxt3中虽然也可以使用axios，但nuxt本身对fetch做了封装，并提供了几个函数 #推荐用法 更推荐使用useFetch直接在业务中请求数据，将返回的数据直接当做ref使用

useAsyncData/useFetch返回的代理数据，是类似`useState`生成的**SSR 友好组合**代理，会根据内部的`key`来校验是否需要重复请求的，删掉了就很容易出现重复请求的结果

通过配置nuxt.config.ts + Nuxt提供的钩子函数，实现全局变量的获取文件往放入内容通过env文件配置来获取服务端全局变量，客户端通过vite.define实现。