vscode怎么看dist目录下的文件

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 不会阻止打开只读文件，但会禁用编辑——这点容易误判成“打不开”。

淘淘乐商城整站 For ECSHOP

基于ECSHOP2.7.2制作，模板使用的是早期的凡客模板。整站大气，清爽。适合综合，鞋子，服饰类商城使用。具体安装方法在程序包中有说明，在使用之前请看下。 大体方法：1.上传程序至网站根目录，访问：域名/diguo (用户名:admin 密码:123456)2.设置好数据库信息,然后恢复数据,数据目录在www.shopex5.com下.3.修改data目录下的config数据库配置文件。4.登陆

下载

• 右键文件 → “在资源管理器中打开”（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