VS Code 中 dist 目录不显示通常是因 files.exclude 配置过滤所致，需检查用户或工作区 settings.json 并删除相关条目；打不开则可能因未生成或只读，应先构建再验证；修改 dist 文件无效是因构建工具仅监听 src，开发务必改源码。
VS Code 里 dist 目录不显示？先确认它没被隐藏
VS Code 默认不会隐藏文件夹，但 dist 看不见，大概率是被工作区设置或全局设置里的 files.exclude 过滤掉了。这个配置优先级高，改了立刻生效，但很多人搜“为什么看不到 dist”却去查文件权限或 Git 忽略——方向错了。
-
Ctrl+,（Windows/Linux）或Cmd+,（macOS）打开设置，搜索files.exclude - 点右上角的“打开设置（JSON）”，检查是否有类似
"**/dist": true或"dist": true的条目 - 如果存在，删掉这一行，保存后
dist目录通常秒级出现 - 注意：项目根目录下的
.vscode/settings.json也会覆盖用户设置，优先检查它
dist 文件打不开？可能是只读或构建产物未生成
能看到 dist 文件夹，但点不开、双击没反应，常见于两种情况：文件本身是构建产物（比如 Webpack/Vite 输出的 index.html），或者系统标记为只读。VS Code 不会阻止打开只读文件，但会禁用编辑——这点容易误判成“打不开”。
- 右键文件 → “在资源管理器中打开”（Windows）或 “在 Finder 中显示”（macOS），确认文件真实存在且可读
- 终端执行
ls -la dist/（macOS/Linux）或dir dist（Windows），看是否有内容输出 - 如果
dist是空的，说明构建没跑，不是 VS Code 的问题——先运行npm run build或pnpm build - VS Code 打开
index.html默认用内置预览（Ctrl+Shift+V），但该预览不支持本地 JS/CSS 加载；要用浏览器打开，右键 → “Reveal in Explorer” → 双击
想直接预览 dist 下的 HTML？别依赖内置 Markdown 预览
VS Code 的 Ctrl+Shift+V 是 Markdown 预览，对 HTML 文件无效。强行用它打开 dist/index.html，只会看到原始 HTML 源码，不是渲染效果——这是新手最常卡住的地方。
- 安装官方插件
Live Server（作者：ritwickdey） - 右键
dist/index.html→ “Open with Live Server” - 它会启动一个本地 HTTP 服务（如
http://127.0.0.1:5500/dist/index.html），支持相对路径、ESM、CORS 等真实环境行为 - 不用 Live Server 的话，手动用浏览器打开文件路径（
file:///xxx/dist/index.html）也可，但会遇到跨域限制，尤其加载 JSON 或调用fetch时直接失败
dist 文件修改后不生效？热重载和缓存得分开看
你改了 dist/main.js 并保存，刷新页面却还是旧逻辑——这不是 VS Code 的锅，而是因为构建工具（Vite/Webpack）根本不管 dist 下的手动修改。它们只监听源码（src/），改 dist 等同于往编译结果里硬塞补丁，下次构建就覆盖。
- 开发阶段不要直接改
dist下任何文件；要改逻辑，一定回到src/对应位置 - 如果只是调试需要临时 patch，改完记得删掉，否则上线构建会把错误带进去
- 浏览器缓存也可能让你以为“没生效”，按
Ctrl+F5强刷，或开无痕窗口验证 - Live Server 默认不自动刷新，需手动刷新页面；如需热更新，得配 Vite 的
vite preview或 Webpack DevServer
dist 没特殊处理，所有“看不见”“打不开”“不生效”的问题，根源都在配置、构建流程或浏览器行为里。最容易被忽略的是：你以为在编辑运行时文件，其实只是在改一次性的产物快照。 
