一、nuxt3 简介

当你搜索看到这篇文章的时候，那么对于nuxt3的基本概念你应该是清楚的了吧。
如果你还没对nuxt3有了解，那么你可以通过官网：Introduction · Get Started with Nuxt 进行了解。

简单来说，nuxt是一种以Vue框架为模版的服务端渲染方案（俗称ssr：server side rendering），对seo极其友好，性能强大。

二、nuxt3解决的问题

对于程序员们开发的网站，很多通过前端框架如Vue、React、Uniapp直接开发出来，使用上是没有问题的，但是当涉及到SEO的时候，仅仅使用这些框架是不够的。seo指的是可以被搜索引擎如百度、谷歌等直接爬虫搜索到。

因为像Vue、React这样的单页面框架（只有一个html，通过客户端js加载渲染数据），对于seo是不友好的。百度这样的搜索引擎爬虫只能爬到没有实际数据的html页面。因为渲染dom结构的时候，在获取数据之前。

所以nuxt3主要是用于解决Vue这种单页面框架的seo问题，当然还做了很多性能优化的工作。
（React对应的ssr方案有Next，名字很像吧）

三、版本

nuxt有个针对Vue版本的版本分水岭，那就是nuxt2和nuxt3。

其中nuxt2使用的是Vue2.x版本，
nuxt3使用的是Vue3.x版本。

对于经常使用Vue开发的朋友们知道，Vue3.x这种组合式Api开发方式，比传统的Vue2.x的选项式开发方式，无论从包大小还是性能上来说是绝对领先的。

所以当下使用nuxt进行服务端渲染的小伙伴来说，使用nuxt3当然是首选。

下面从官网截了一张图，可以看到不同版本之间的直观对比。

四、万事开头难

1. 创建nuxt工程（nuxt3 & vue3.x)

npx nuxi@latest init my-app

2. 问题
   刚开始接触nuxt开发的小伙伴，在创建模版工程的时候，经常遇到一个问题（当然国内外都有出现，详情可见：nuxt github issue），就是Error: Failed to download template from registry: fetch failed。

问题截图：

文本描述：
ERROR Error: Failed to download template from registry: fetch failed

这种问题很鸡肋，非常影响初学者的学习进度。

3. 解决方案
   这个问题出现的原因就是在于，在下载nuxt的模版代码到本地时，网络无法访问：raw.githubusercontent.com，具体原因有很多，不便解释。

如何解决这个网络问题，网上也有很多方案。
方案一：
大多数就是修改hosts文件：通过ip/域名查询（网上有很多，可以自行搜索）raw.githubusercontent.com 的ip地址，然后在hosts文件中加上一句（以mac中hosts举例）：

# nuxt
185.199.108.133 raw.githubusercontent.com

很多同学能解决掉，当然也有不成功的。

方案二：
如果方案一没有解决，那么大家不妨试试如下方案：

• 目的在于修改dns的配置。
• 以Mac为例，打开网络偏好设置，打开高级，找到dns设置，添加ip：8.8.8.8，然后点击确定->应用:
  
  

这个是将dns首选指到谷歌，这种方式是我自用的有效方式，大家不妨试试。

以上。