vue使用中网页报错Failed to resolve module specifier “vue“. Relative references must start with either “/“

文章讲述了在初次使用Vue框架时,在VSCode中尝试打开HTML文件时遇到的错误,原因是由于项目在不同的开发服务器(如Vite和IDE内置服务器)上运行,端口不一致。解决办法是检查Vite服务器的正确地址并使用它来访问项目,避免直接通过IDE的默认服务器。

问题

初次使用vue框架用,在vscode中选择打开html文件查看页面时报错

原因

这是因为你的项目在不同的开发服务器上运行。

  • 通过 http://127.0.0.1:5501 访问的是一个本地服务器,通常是一些 IDE 或者本地服务器插件提供的。
  • 通过 http://localhost:5173 访问的是 Vite 开发服务器。

这两者之间的端口和地址可能不同,因为它们是不同的服务器实例。通常,你应该使用 Vite 提供的服务器地址 http://localhost:5173 来访问你的 Vue 项目。

在终端中,当你运行 npx vite 启动 Vite 开发服务器时,终端会输出一个 URL,通常是 http://localhost:xxxx,其中 xxxx 是分配给 Vite 服务器的端口号。你应该使用这个地址来访问你的应用程序,而不是使用其他可能由 IDE 或本地服务器插件提供的地址。

如果你使用的是 Visual Studio Code,那么在左下角可能有一个 "Go Live" 的按钮,它会启动一个本地服务器,提供类似 http://127.0.0.1:5501 这样的地址。但是,在 Vite 项目中,你通常应该使用由 Vite 提供的地址。

解决方法

不要直接通过IDE打开,通过启动vue项目给出的地址打开

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值