[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fORW33m79alvce-n4SRHTBx6pb-hb4KdEmovKu65nQXY":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},8,"2024-01-09T15:25:56.498Z","nuxt3 服务端渲染ssr - Error: Failed to download template from registry: fetch failed","### 一、nuxt3 简介\n当你搜索看到这篇文章的时候，那么对于nuxt3的基本概念你应该是清楚的了吧。\n如果你还没对nuxt3有了解，那么你可以通过官网：[nuxt3官网](https://nuxt.com/docs/getting-started/introduction)进行了解。\n\n简单来说，nuxt是一种以Vue框架为模版的服务端渲染方案（俗称ssr：server side rendering），对seo极其友好，性能强大。\n\n### 二、nuxt3解决的问题\n对于程序员们开发的网站，很多通过前端框架如Vue、React、Uniapp直接开发出来，使用上是没有问题的，但是当涉及到SEO的时候，仅仅使用这些框架是不够的。seo指的是可以被搜索引擎如百度、谷歌等直接爬虫搜索到。\n\n因为像Vue、React这样的单页面框架（只有一个html，通过客户端js加载渲染数据），对于seo是不友好的。百度这样的搜索引擎爬虫只能爬到没有实际数据的html页面。因为渲染dom结构的时候，在获取数据之前。\n\n所以nuxt3主要是用于解决Vue这种单页面框架的seo问题，当然还做了很多性能优化的工作。\n（React对应的ssr方案有Next，名字很像吧）\n\n### 三、版本\nnuxt有个针对Vue版本的版本分水岭，那就是nuxt2和nuxt3。\n\n其中nuxt2使用的是Vue2.x版本，\nnuxt3使用的是Vue3.x版本。\n\n对于经常使用Vue开发的朋友们知道，Vue3.x这种组合式Api开发方式，比传统的Vue2.x的选项式开发方式，无论从包大小还是性能上来说是绝对领先的。\n\n所以当下使用nuxt进行服务端渲染的小伙伴来说，使用nuxt3当然是首选。\n\n下面从官网截了一张图，可以看到不同版本之间的直观对比。\n\n![](https://image.xinwei.ltd/image1704812263060.png)\n\n### 四、万事开头难\n1. 创建nuxt工程（nuxt3 & vue3.x)\n```terminal\nnpx nuxi@latest init my-app\n```\n2. 问题\n刚开始接触nuxt开发的小伙伴，在创建模版工程的时候，经常遇到一个问题（当然国内外都有出现，详情可见：[nuxt github issue](https://github.com/nuxt/nuxt/issues/21853)），就是Error: Failed to download template from registry: fetch failed。\n\n问题截图：\n![](https://image.xinwei.ltd/image1704812908132.png)\n\n\n文本描述：\n ERROR  Error: Failed to download template from registry: fetch failed\n\n这种问题很鸡肋，非常影响初学者的学习进度。\n\n3. 解决方案\n这个问题出现的原因就是在于，在下载nuxt的模版代码到本地时，网络无法访问：`raw.githubusercontent.com`，具体原因有很多，不便解释。\n\n如何解决这个网络问题，网上也有很多方案。\n方案一：\n大多数就是修改hosts文件：通过ip/域名查询（网上有很多，可以自行搜索）`raw.githubusercontent.com`的ip地址，然后在hosts文件中加上一句（以mac中hosts举例）：\n```hosts文件\n# nuxt\n185.199.108.133 raw.githubusercontent.com\n```\n很多同学能解决掉，当然也有不成功的。\n\n方案二：\n如果方案一没有解决，那么大家不妨试试如下方案：\n- [x] 目的在于修改dns的配置。\n- [x] 以Mac为例，打开网络偏好设置，打开高级，找到dns设置，添加ip：8.8.8.8，然后点击确定->应用:\n![](https://image.xinwei.ltd/image1704813820922.png)\n这个是将dns首选指到谷歌，这种方式是我自用的有效方式，大家不妨试试。\n\n以上。\n\n\n\n","一、nuxt3 简介 当你搜索看到这篇文章的时候，那么对于nuxt3的基本概念你应该是清楚的了吧。 如果你还没对nuxt3有了解，那么你可以通过官网：[nuxt3官网](https://nuxt.com/docs/getting-started/introduction)进行了解。 简单来说，nuxt是一种以Vue框架为模版的服务端渲染方案（俗称ssr：server side rendering）","https://image.xinwei.ltd/image1704812263060.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],"",423,0,"nuxt,nuxt3,nuxt服务端渲染,nuxt error,failed to download template"]