从给Vite2官方提了一个issues并已被认可为Bug,我学到了什么?

简介: 从给Vite2官方提了一个issues并已被认可为Bug,我学到了什么?

缘起


我打算使用自己搭建的V3项目脚手架parcel-vue-app搞一搞项目,毕竟是刚出来,很多东西都不完善,只能自己不断尝试。于是,使用parcel-vue-cli开始初始化项目(如果有小伙伴对parcel-vue-app感兴趣的,文末有源码地址)。


...项目搭建完毕


启动地址是http://localhost:3000/,一顿操作之后,页面也能很快地更新数据。


不得不觉得Parcel在这方面做得还是很不错的。于是这时,想到了尤大大开发的Vite,决定比较一下。于是进入vite官方网站,下载了vite@2.3.0,选择的是vue模板。这时,根据提示进入项目目录,然后运行yarn dev命令启动项目。一眨眼的功夫就启动起来,不得不说太厉害了。这时,我看到了这行绿字http://localhost:3000/,什么?给我第一感觉是vite难道没有占用端口号检测机制,不会吧!不敢相信的我开始找vite官网的配置。我在vite.config.js文件中添加了这几行代码。


import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    strictPort: true,
  },
});


我指定服务器端口。官方也说了如果端口已经被使用,Vite 会自动尝试下一个可用的端口。另外我还不放心strictPort设为true,这样若端口已被占用则会直接退出,而不是尝试下一个可用端口。这应该好了吧!于是,我关闭vite项目,重启了下,我看到了下面这幅图。


微信截图_20220506152121.png


于是,我还是不死心,我先关闭parcel项目,又关闭了vite项目。


决定从头开始,首先我打开了之前创建的的vite项目。之前vite项目的版本是2.0.4,我心想版本不一样应该不会有事,于是我又兴致勃勃地启动了vite@2.0.4项目,端口号是3000,接着我又启动了vite@2.3.0项目(实际是2.3.1package.jsonnode_modules版本不一致,这里暂且忽略),接着就发生了下面这种事。


微信截图_20220506152133.png


当时的感觉就是,这种事怎么让我遇到了。我还是不死心,我试试VueCLI跟Vite对比一下。 Vite项目这里使用的是vite@2.3.0,结果发现,vite可以检测到,并且成功阻止了。


接着,我又创建了一个vite@2.3.0项目,打算看下相同版本的项目会不会出现这种情况。


微信截图_20220506152146.png


然后,我又启动了一个vite@2.0.5的项目,发现并不是我们预想到的3002端口,还是3000端口。于是我觉得入坑了~,这里可能是之前vite遗留的bug,现在的新版本解决了。


微信截图_20220506152154.png


解决完一个疑惑,但是最初那个疑惑还没有解决。就是启动parcel2项目,vite项目(vite@2.3.0)检测不到parcel2已占用端口。


于是,就去github上提了一个issues。


github.com/vitejs/vite…


缘落


提了一个issues,回复非常快,并且已确认Bug。给vite团队点赞!


微信截图_20220506152203.png


以下是回复内容:


  • 回复1:


Looks like parcel is listening to all address (as --host ::). Vite 2.3 switched the default to listen only to 127.0.0.1, so there isn't an error when listening to it in the same port.

If you use --host or --host :: in vite, you will get the same behavior as with 2.2 and it will fail as you expect. You could also set parcel to listen to --host 127.0.0.1 and also get a hard error.

I don't know if there is something that should be fixed in Vite regarding this. Other tools like sirv-cli also work in the same way, and will not recognize that 3000 is being used in this case.


翻译为:


看起来parcel2正在侦听所有地址(如--host::)。 Vite 2.3将默认设置切换为仅侦听127.0.0.1,因此在同一端口中侦听它时没有错误。 如果在vite中使用--host或--host ::,将获得与2.2相同的行为,并且将按预期失败。 您还可以将parcel2设置为侦听--host 127.0.0.1,并且还会收到硬错误。


我不知道Vite是否应该对此进行修复。 诸如sirv-cli之类的其他工具也以相同的方式工作,在这种情况下将无法识别使用了3000。


  • 回复2:


related to the port-reuse issue of node.

@maomincoding you can specified server.host to '::' as a temporay workaround.

Since 1e604d5b60900098f201f90394445fea55642e74, httpServer will listen to a specified default host caused this issue.


翻译为:


涉及到节点的端口重用问题。


@maomincoding可以将server.host指定为“::”作为临时解决方法。


由于1e604d5b60900098f201f90394445fea55642e74,httpServer将侦听导致此问题的指定默认主机。


https://github.com/vitejs/vite/commit/1e604d5b60900098f201f90394445fea55642e74


微信截图_20220506152216.png


https://stackoverflow.com/questions/60217071/node-js-server-

listens-to-the-same-port-on-0-0-0-0-and-localhost-without-error


微信截图_20220506152229.png


有了以上两个回复,我暂且在parcel项目中使用--host 127.0.0.1解决了问题。


微信截图_20220506152237.png


并且,我又对parcel-vue-app进行了更新,最新版本v1.0.6。也谢谢有了这次经历,让自己的工具越来越好。


其实,不光以上两个回复,还有第三个回复。


  • 回复3


For the future, please do not ping Evan directly. We have an active team around Vite that is working / triaging issues and PRs every day and we decide what is needed to reach Evan so he can manage higher order stuff in the whole Vue ecosystem.


翻译为:


以后,请不要直接联系Evan。 我们在Vite周围有一个活跃的团队,每天都在工作/分类问题和PRs,我们决定需要什么来联系Evan,这样他就可以在整个Vue生态系统中管理更高层次的东西。


以下是我回复的话:


Sorry, it won't happen again.


我算是前车之鉴了,大家以后提issues的时候就不要跟我一样艾特尤大大。


......


总结


  1. 学好英语很重要!!!我大部分都是用谷歌翻译~
  2. 要不断钻研,说不定你会学到很多东西。
  3. 还要懂得不要打扰别人,我就是个反面教材。



相关文章
|
5月前
|
机器学习/深度学习 人工智能 开发工具
《Git 简易速速上手小册》第10章:未来趋势与扩展阅读(2024 最新版)
《Git 简易速速上手小册》第10章:未来趋势与扩展阅读(2024 最新版)
70 3
|
5月前
|
Java 项目管理 开发工具
《Git 简易速速上手小册》第7章:处理大型项目(2024 最新版)
《Git 简易速速上手小册》第7章:处理大型项目(2024 最新版)
77 2
|
5月前
开发不认可你提交的bug怎么办?
开发不认可你提交的bug怎么办?
351 0
|
5月前
|
缓存 API 开发工具
2024 Flutter 一季度热门 issue/roadmap 进展和个人感触闲聊
Flutter 已经和 Android Team 沟通并推进相关 Android 14 的 patch 落地:
51 2
|
5月前
|
监控 安全 前端开发
《VitePress 简易速速上手小册》第10章 维护与更新(2024 最新版)
《VitePress 简易速速上手小册》第10章 维护与更新(2024 最新版)
127 2
|
监控 Java 测试技术
GitHub上线一分钟标星破千万!这份Java性能优化手册看完最少p8
性能优化一直是一个永恒的话题,尤其在“糙快猛”的互联网开发模式大行其道的今天,随着系统访问量的日益增加和代码的臃肿,各种性能问题纷至沓来,Java语言作为使用最广泛的一门语言,在社区生态更是积攒了非常多宝贵的经验。如果既懂系统,又懂技术原理,那么对性能调优的帮助将非常大。
86 0
|
消息中间件 JavaScript 小程序
发现一个Spring事务的巨坑bug,可是官方都不承认?大家来评评理!
发现一个Spring事务的巨坑bug,可是官方都不承认?大家来评评理!
|
SQL JSON Java
发现Seata TCC模式的一个BUG,顺手给社区提了一个issue
发现Seata TCC模式的一个BUG,顺手给社区提了一个issue
274 0
|
测试技术 开发者
太棒了,GitHub Review 代码能力小升级
一些朋友可能或多或少都会在 GitHub 参与一些项目的 Code Review(以下都简称 CR) 工作。以前的 GitHub,CR 体验并不好,你无法同时选中多行代码进行 comment。
443 0
太棒了,GitHub Review 代码能力小升级
|
开发工具 git
Github上如何为开源项目提bug?
如何为开源项目提bug?   大家都知道,在解决一个问题之前,必须先了解这个问题,所以创建一个 问题(Issues) 来帮助开源项目是一个很好的方式。   当我们下载了开源项目的代码,引入到我的项目中,但是我们会发现这个代码中存在问题,并不能满足我的所有要求,可能是在我需要用到的一个函数里面有一个错误,但是我不知道如何修复这个错误,   这个时候可以通过 github 的 Issues 形式来构建一个非常好的问题报告来帮助项目的维护者和其他的贡献者来完善这个 bug,从而来完善整个开源项目。
2318 0