vite + vue,将端口修改之后,启动前端项目成功,但访问地址失败。

900 阅读1分钟

近日使用vite起了一个vue3的项目,跟着文档一套下来很顺利,下载完依赖,我在vue.config.ts中将端口改为 6000, 如图:

config.ts.png

执行指令 pnpm run dev ,终端显示项目成功启动,但!

siteError.png

ok,有问题,到搜索引擎上检索,"vite config server",进入vite官网,然后关掉,因为没看到跟这个报错的相关信息。

最后在错误网页中看到一行小字 ERR_UNSAFE_PORT,复制搜索,我悟了。。。原来是chrome浏览器的一个安全策略,一句话描述就是:“Chrome 浏览器定义了一些内置端口,如果要访问的地址端口号与这些内置端口相同,就会出现ERR_UNSAFE_PORT 问题。” 那么chrome的非安全端口都有哪些呢?看下图:

unsafe_port.png