nuxt3的一些知识点,持续更新

1.npx nuxi@latest init xx 命令执行失败

 ERROR  Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed

解决办法：host加上
185.199.108.133 raw.githubusercontent.com
直接在浏览器下载https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json，里面有个tar地址，下载下来,解压后进目录npm i 安装

2.a页面使用了useFetch获取服务端数据，跳转到b页面，从b页面又返回到a页面的时候useFetch又执行了一次，会不会影响体验？

先说服务端渲染的原理，就是服务端按vue文件先解析一遍计算出当前页面的html，客户端还是使用vue技术，所以vue的代码会同样下发到客户端；vue技术采用是spa的路由开发
模式，所以除了首次渲染是服务端渲染，后面的渲染都跟普通的vue开发一样，是客户端渲染。除非对路由加钩子，采用location的跳转方式，每页都进行服务端渲染

useFetch默认是阻塞的，所以体验上没有什么问题，并不会出现先渲染再请求再渲染的效果，也可以使用lazy的方式不阻塞，跟进实际情况使用

3.Hydration node mismatch告警的问题

这个错误的意思是渲染出来的dom跟vue里面的虚拟dom模型或变量不匹配，这类问题一般正常的写法碰不到，除非手动干预了，例如写if(process.server){}或if(process.client){}，里面对
一些变量进行的改写，并渲染，但在客户端的环境里面又是不一致的，举例：

let data = ref("1")
if(process.server){data.value=2}

<template><div>{{data}}</div></template>

解决办法，使用useSate，把let data = ref("1")改成let data = useSate("data1");对数据进行持久化，这样服务端修改的数据，在客户端同样就能读得到，解决一致性问题，使用useSate
就是要注意里面的key是这个项目唯一，补充：useDate的数据并不会保存在服务端，只是会把数据给客户端持久化，所以不用担心服务端内存问题

4.如何使用keepalive缓存页面

defineOptions({//需要keepalive的页面一定要给个名字
  name: "233",
});
definePageMeta({
  keepalive: true, //设置为keepAlive
});

5.nuxt的代码没看到import的代码

答：因为nuxt项目有自动import功能（刚用还不太习惯）,首次启动比较慢

6.无法使用本地ip地址访问

解决办法：在nuxt.config.ts添加devServer的设置

export default defineNuxtConfig({
  devServer: {
    host: "0.0.0.0",
    port: 3000,
  },
});

7.如何修改根目录

解决办法：在nuxt.config.ts添加app，baseURL的设置

export default defineNuxtConfig({
  app: {
    baseURL: "/account-project",
  },
});

8.layouts，pages，components几个目录的潜在关系

假设app.vue的代码

<template>
  <NuxtLayout>
    <!-- Show Nuxt progress indicator on page change -->
    <NuxtLoadingIndicator />
    <NuxtPage />
  </NuxtLayout>
</template>

components下面新建一个Window/index.vue的文件，在其他2个目录下面可以直接使用Window标签，无需引入
<NuxtLayout>默认会指向layouts/default.vue
<NuxtPage />默认会指向pages/index.vue

pages里面的页面也可以指定使用layout

definePageMeta({
  layout: "personal",
});

 personal会对应到layouts/personal.vue,代替default.vue

9.pages目录如何配置动态路由

例如，电商网站，每个分类都是动态的，分类下面有各种商品,可以这样配置
--分类页
pages/[class]/index.vue
--商品页
pages/[class]/[id].vue

通过代码

const route = useRoute();
// 当访问/1/2时，route.params.class将为1,route.params.id将为1
console.log(route.params);

其他的server，api，中间件，插件的了解后再补充

参考

https://nuxt.com/ 官网
https://nuxt.com.cn/docs/api/nuxt-config#keepalive
https://github.com/nuxt/examples