前言
日常工作中，我们总会去接触不同的项目。但我每个人的开发环境不同，获取到源码后可能出现各种问题导致项目跑不起来，或者跑起来后出现奇怪的问题。 本文记录自己在一个新项目中遇到的登录后页面空白问题，逐步排查最终解决，希望可以帮助到你。
登录后路由警告,首页空白
这个一个 app 项目，正常安装依赖后，启动项目进入 login 页面，没有任何问题。然后输入账号密码进行登录后url路由显示 /Home， 但是页面是空白的！
起初我以为是报错问题导致的，然后控制台查看:
没有报错，只有一个警告： [vue Router warn]: Record with path "/Home" is either missing a "component(s)" or "children" property.
说是路径为“/Home”的记录缺少“组件”或“子”属性。这只是个警告我们先不管他，一般只是警告的话大概率不会服务进程。 后面在说这个警告！！！
问题排查
很明显大概率是 Home 路由的问题。 于是尝试手动输入其他路由路径看能不能跳转到别的页面，果然，手动输入其他路由是可以正常进入的，就是登录后跳转的首页进来显示空白！
检查首页元素，通过 Dom 元素查看：
class类为 index grey-root 的根节点下面是空的。源码中找到对应 index.vue 查看
发现这个 index 类下的标签是 <rooter-view> ， 由此可以断定根本不是 Home 页面空白，而是 这个路由页面根本没有加载进来！虽然 url 访问了 /#/Home， 但是 html 中并没有加载对应 Home 的文件，所以页面也就显示空白了。
解决
排查到是什么问题，我们开始解决，首先想到的是看看源码中有没有首页这个文件。
查看后发现，源码目录中确实有 Home.vue 组件啊！
然后想到的就是去查看路由配置，是否包含 /Home 路由， 打开 router.js，发现该项目的路由是接口返回的，不是项目中写死的。
于是查看网络请求，发现确实有接口返回路由信息，并且确实有首页路由路径：
于是我纠结了半天后，想到找之前负责这个项目的同事问问情况，经过一番沟通后告诉我他本地是ok的，并且截图给到我，有图有真相。
我开始自我怀疑，是不是我自己哪里出了问题! 但是又想到我是第一次拉取的项目，而且没有做任何代码的改动，直接启动项目就出现这个情况，大概率不应该是我自身的问题呀！
我觉得应该是有代码没有提交全，在和同事一番沟通后，我突然想到了最开始控制台报的警告问题了，于是我问同事他本地项目起来后有没有这个警告，结果他那边没有！
所以我心想肯定是他本地代码和我本地代码有不一样的地方！ 过了一会同事让我看看我本地代码 home 文是大写还是小写，我截图给到他。
这时他应该看到的与他本地出入的地方，让我把 home 文件夹改成大写： Home。 此时我看到信息我也感觉到应该就是这个地方导致的问题！
于是本地修改后首页直接就出来了！哈哈哈，他也不解为什么他本地没有任何代码提交了并且给我截图。 但是git 远程仓库代码目录中确实是 小写的 home 文件夹。
远程仓库文件夹修改
-
方式1 直接本地复制一份 home 文件夹内容，修改为大写 Home 然后提交，删除小写文件夹。
-
方式2
直接通过gitlab远程仓库的平台界面进行修改，然后拉取代码
- 方式3
直接在本地修改目录名称，git 是识别不到的。
使用 git mv 命令修改文件夹名称
git mv README.md README
其实，运行 git mv 就相当于运行了下面三条命令：
$ mv README.md README $ git rm README.md $ git add README
这里我们修改的是文件夹，所以直接：
git mv home Home
然后提交，查看远程仓库是否更改。
启动项目后 ts 警告
- 报错内容：
=============
WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.
You may find that it works just fine, or you may not.
SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.2.0
YOUR TYPESCRIPT VERSION: 5.6.3
Please only submit bug reports when using the officially supported version.
=============
安装好依赖后，启动后出现这个警告，先不管他直接 url访问，发现可以访问。对于强迫症来说警告也很难受，必须解决：
警告：您当前运行的TypeScript版本不受@TypeScript eslint/TypeScript estree的正式支持。
你可能会发现它工作得很好，也可能不会。
支持的ts版本：>=3.3.1<5.2.0
你的 ts 版本：5.6.3
解决
终端执行： pnpm list typescript 查看当前仓库安装的 ts 版本到底是多少，结果确实为 5.6.3，但是我的 package.json 中却是："^5.1.6"
直接使用命令卸载当前项目的 ts：pnpm uninstall tyepscript
安装上面提示范围版本的 ts ：pnpm i tyepscript@5.1.6 -D
然后重新 pnpm dev 启动，发现报错消失，解决。
