VSCode移动index.html后项目失效，移回仍无内容，求恢复方法

1. 先查浏览器报错信息 #

打开出问题的页面，按F12调出开发者工具，切换到「Console」标签看红色报错（比如404、资源加载失败）；再切到「Network」标签刷新页面，看哪些资源显示红色状态码——这些找不到的文件就是功能失效的核心原因。

2. 修正资源引用路径 #

你移动index.html时，页面里CSS、JS、图片等资源的相对路径会失效，得手动修正：

• 比如原来index.html在src/文件夹，引用JS是<script src="./app.js"></script>，移到根目录后要改成<script src="./src/app.js"></script>；移回原文件夹时，得改回原来的./app.js。
• 逐个检查index.html里的<link>、<script>、<img>标签的href/src属性，确保路径和文件实际位置匹配。

3. 本地测试用服务器打开 #

别直接双击index.html打开（本地文件协议可能限制资源加载），用本地服务器启动项目：

• VSCode装「Live Server」插件，右键index.html选「Open with Live Server」；
• 有Python3的话，在项目根目录运行命令：python -m http.server，再在浏览器访问http://localhost:8000/[你的原文件夹路径]/index.html；
• 有Node.js的话，运行npx serve，同样访问对应路径。

4. 部署时别手动移动文件 #

下次部署如果index.html不在根目录，直接在部署平台设置发布目录：

• GitHub Pages：仓库设置里选「Pages」，在「Source」指定你的原文件夹作为发布目录；
• Vercel/Netlify：部署时在「Build & Deploy」设置里，把「Publish Directory」设为你的原文件夹路径。

内容的提问来源于stack exchange，提问作者Anna Riley