因为项目有SEO的要求，需要使用多页面来创建项目，这里是使用了nuxt3框架，使用ssr服务端渲染，个人在使用过程中踩到的一些坑，记录一下。

中文官网地址：Nuxt 中文站 - 直观的Web框架 Nuxt3文档 · Nuxt

一、运行或者打包的时候遇到localStorage等缓存方法报undefined

        可使用 if (typeof window !== "undefined") { 里面放执行的操作 }

二、如果需要自定动态TDK

        在middleware文件下的app.global.js里，这里类似路由中间件，可以做路由拦截或你个人想实现的单独操作

export default defineNuxtRouteMiddleware((to, from) => {
useHead(里面放设置的TDK)
meta数组中如果需要设置展示的前后顺序可以使用  tagPriority参数
例{ name: "keywords", content: pageTKD.keywords, tagPriority: 1 },
这里面也可以设置路由拦截以及跳转页面让页面滚动到顶部
}

三、nuxt3自带的pageTransition

        个人建议不用，因为自己使用之后，短时间内连续点击浏览器的刷新、前进后退、或者跳转页面，会导致页面报错和错乱，如果却需要用，可以将动画执行时间缩短，避免出现此问题

        设置pageTransition可在nuxt.config.ts中

export default defineNuxtConfig({
    app：{
        pageTransition:{name:'page',mode:'out-in'}
    }
}）

   四、添加一些插件js  

        例百度统计，可放在public文件下的js文件夹内，然后在nuxt.config.ts里面

        app配置项内的script配置，例statistics.js。tagPosition参数决定放在body标签结束之前，还是放在放在body标签之前

script: [
        { src: '/js/statistics.js', tagPosition: 'bodyClose',type:'module' },
]

  五、关于打包之后css大量出现源代码中

       可在nuxt.config.ts中配置如下

export default defineNuxtConfig({
        experimental:{
            inlineSSRStyles:false,//这里是将css样式注入到内联中，不再释放出来
            writeEarlyHints: false,
        },
})

  六、关于配置环境问题

        在app.vue同级寻找env文件夹，如果没有就新建一个，然后分别创建三个文件

       dev为本地接口环境、prod为正式接口环境、test则为测试接口环境，具体设置如下

VITE_API_ENV = 'dev'
VITE_API_URL = 'http://192.168.2.111:15012'

        这里的VITE_API_ENV按照你的环境分别设置dev、test、prod，VITE_API_URL就为你自己的接口地址

        在nuxt.config.ts中配置如下

import { loadEnv } from 'vite';
const envScript = (process.env as any).npm_lifecycle_script.split(' ')
const envName = envScript[envScript.length - 1] // 通过启动命令区分环境
const envData = loadEnv(envName, 'env') as unknown as VITE_ENV_CONFIG
export default defineNuxtConfig({
    runtimeConfig: {
        public: envData ,// 把env放入这个里面，通过useRuntimeConfig获取
    },
    vite：{
        envDir: '~/env', // 指定env文件夹
    }
})

        package.json文件中设置如下

{
    "scripts": {
        "dev": "nuxt dev",
        "generate_test": "nuxt generate --mode test",
        "generate_prod": "nuxt generate --mode prod",
    }
}

        完成以上配置，那么你的接口环境配置就已经完成了

       七、设置404页面

        我们知道nuxt并不需要我们去像router配置路由，所以我们普通页面可以直接在pages文件夹创建即可，但是404页面，我们需要再app.vue的同级目录创建error.vue，这里不需要我们在其他的地方单独操作，nuxt会自动根据错误跳转到你的error页面

         以上为个人部分关于nuxt3框架碰到的问题和做法，后续会继续补充，有不足之处恳请各位大佬批评指正Thanks♪(･ω･)ﾉ