Nuxt脚手架nuxi初始化失败原因&解决方法

起因

前几天终于把毕业设计的开题报告整完了,有了一点时间干自己的事,于是就想着学学nuxt3。

结果发现跟着官方教程敲的第一行命令就出现了问题。

npx nuxi init nuxt3-app

这行代码是nuxt的脚手架,会生成一个最简单的模板项目。

脚手架报错

这行命令会去github拉取相关文件,然后连接失败报错了。

国内由于墙的墙的原因,raw.githubusercontent.com这个域名受到了DNS污染,没法连接看好像挺合理的,但是关键我平时都是开着代理的。

curl能够正常获取

如图所示,我直接用curl没有一点问题,能够正确获取 raw.githubusercontent.com 上的文件。

看来,唯一的解释就是脚手架node程序没有走代理。

原因的确认

经过简单搜索,我在nuxt framework仓库中的issue #8002 找到了类似情况。

从中可以了解到 nuxt的脚手架 nuxi 使用了 giget 来从nuxt项目模板仓库中获取文件。

giget干的事情很简单,就是利用node从github上拉取相应仓库。实际上giget貌似是nuxt团队对另一个相似的项目degit的拙劣仿制。

两者都可以用方便的命令从github拉取仓库。

唯一的不同就是degit支持自动从环境变量中获取https_proxy进行代理,而giget完全没有考虑这一点。

HTTPS proxying
If you have an https_proxy environment variable, Degit will use it.

degit和giget对比

临时解决办法

目前nuxt社区已经注意到了此情况,在giget中提出了相关issue,而且有一个大佬已经提交了相关PR

PR opened 2 days ago

可惜PR已经提出2天了,也没有相关回复,并入giget仓库不知道还要花多久。

这里我给出两个解决办法

(1)手动克隆模板仓库

其实,从之前我们也知道了,所谓的脚手架实际上就是拉去nuxt项目模板仓库中的文件。

所以我们只需要手动git clone即可。

git clone -b v3 https://github.com/nuxt/starter.git nuxt3-app

-b 是指定分支,目前最新的nuxt3在v3分支。

git clone

(2)使用支持https代理的degit

degit 'nuxt/starter#v3' nuxt3-app

#v3代表下载相应分支。

degit

这里我更推荐使用degit,因为代码量少,而且degit拉取的项目中不包含模板仓库的.git目录。

思考:node程序如何支持代理

观察那位大佬提交的PR可以看到,他使用了https-proxy-agent实现代理。

PR detail

这里对https-proxy-agent做了简单试用。

代码: https://stackblitz.com/edit/node-zwkzaa?embed=1&file=index.js

不适用代理的情况:

使用代理的情况:

  • 9
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nuxt3中,手机路由跳转失败的问题可能是由于没有正确配置路由或者没有设置正确的参数导致的。一个解决该问题的方案是使用`navigateTo`方法,并且在跳转时添加`replace: true`属性。 具体操作如下: 1. 在Nuxt框架自带的`pages`文件夹下创建文件夹以及页面。 2. 在页面中,使用`navigateTo`方法进行路由跳转,并在跳转时添加`replace: true`属性。 3. 例如,可以在点击查询触发的`onSubmit`函数中使用以下代码: ```javascript const onSubmit = async () => { navigateTo({ path: '/home', query: { nameCn: form.name, }, }, { replace: true, }); } ``` 这样,通过添加`replace: true`属性,浏览器路由将被替换,从而实现页面的刷新。 请注意,以上方案是基于Nuxt3框架中的解决方法,不同的框架可能会有不同的实现方式。所以在使用时请根据具体的框架和版本进行相应的调整和验证。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3+nuxt3 进行页面跳转时 页面不会回到顶部问题](https://blog.csdn.net/weixin_49684489/article/details/128012360)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Nuxt框架的路由跳转及传参](https://download.csdn.net/download/weixin_38730977/14887961)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Nuxt3路由query参数不生效,query参数页面跳转刷新问题](https://blog.csdn.net/weixin_41016986/article/details/130220233)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值