imwty

专注大前端Web应用开发实践

0%

Nuxt3实战系列之安装Nuxt3

Nuxt3最新版本3.2.2也发布了一段时间了,抱着研究学习的态度,笔者想用Nuxt3开发一个RBAC权限管理系统,结果按照官方的命令安装项目脚手架时候直接报错,提示 Failed to download template from register:fetch failed

image.png

刚开始以为是需要用vpn搭梯子,结果配置代理后,依然报错,也不知道到底咋回事。总不至于对于Nuxt3的学习就要止步于此了吧?想想自己前几天还安装过一次,都成功安装了的。

经过一番查证,总算有大佬解释了这个问题。即nuxt的脚手架 nuxi 使用了 giget 来从nuxt项目模板仓库中获取文件。
giget干的事情很简单,就是利用node从github上拉取相应仓库。实际上giget貌似是nuxt团队对另一个相似的项目degit的仿制。两者都可以用方便的命令从github拉取仓库。唯一的不同就是degit支持自动从环境变量中获取https_proxy进行代理,而giget完全没有考虑这一点。

然后怎么解决这个问题呢?那就是手动修改我们电脑本地的host文件。Mac系统的host文件目录在/etc/hosts。windows系统的hosts文件目录在C:\Windows\System32\drivers\etc\host 。我们打开host文件,在里边增加一行

1
185.199.108.133 raw.githubusercontent.com

笔者修改成功后显示如下:

注意这个ip185.199.108.133是可能会改变的,最终配置为哪个IP,需要通过去 https://ipaddress.com/website/raw.githubusercontent.com 网站查询域名对应的真实ip

在稳定的网络环境并且可以ping通raw.githubusercontent.com后再运行安装命令(我这里使用的是npx版本的命令)就可成功初始化安装Nuxt3项目文件了。

当然如果嫌配置麻烦且没有vpn的伙伴,本着助人为乐的态度,笔者将Nuxt3的脚手架项目也提交到了github开源仓库,如果有需要的小伙伴,可以自取,我会定期更新,保持和官方的代码一致。项目地址如下:

Nuxt 3 Minimal Starter (github.com)

如果觉得从github拉取代码也麻烦的话,笔者还提供了直接下载链接,如下:

https://www.tyhub.com/450977

代码拉取到本地,安装完依赖(笔者使用的pnpm),可以成功运行,可以看到是最新的3.2.2:

image.png