有一天,网友求助说项目出问题了,忙帮看看,并且将他的源代码打包发给了我。我直接反手一个下载、解压、打开项目一气呵成。
然,启动项目就白屏。然后浏览器就提示:
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../"
同时,vscode的控制台也有错误提示:
09:30:44 [vite] Pre-transform error: Failed to load url /src/main.ts (resolved id: D:/Users/****/Downloads/frontend/src/main.ts). Does the file exist? (x2)
我去,这是直接中道崩渠啊,直接连页面都没看到。
一、解决办法
苦苦寻找原因,百度了一大圈、Google了一大圈、Bing了一大圈,然后灵光一闪,还是解决了。这里就汇总一下解决办法。这些情况都会导致这个问题产生,你可以按照自己的情况定夺:
- 项目放在了一个有特殊符号的目录中,反正你就把项目放在纯英文的目录中再试试。
- 项目放在了一个好深好深的目录中,或者说目录实在是太长了,减短试试。
- 项目放在了一个软链目录中,并且通过软链目录打开项目和执行了相关命令。有2个办法解决这个原因导致的问题:
- a. 你只需要在打开项目的时候不使用软链打开,使用实际的位置打开这个项目,就没事了。
- b. 继续保持使用软链目录打开项目,在
vite.config.js
文件中设置resolve
节点下的preserveSymlinks
为true
即可。
我就是第3种情况,我最开始找半天问题,后来突然想起我的整个用户目录都被我软链到了另一个磁盘的目录中,当我把网页的项目下载下来时,自然就保持到了用户目录的下载目录里,意味着我在下载目录中打开这个项目时,实际上是通过软链打开的这个项目,于是就产生了此问题。
后来我将 preserveSymlinks
设置为 true
后,一切即可正常运行了。这个参数是我跟源码跟到了,后来发现vite官方是有这个字段的介绍的:
跳转官方介绍:preserveSymlinks介绍。