1

2025-10-08 18:53:38 +08:00
parent 43eb9715fa
commit 845658f193
39 changed files with 4820 additions and 93 deletions
--- a/demo-project/Source_Map_说明.md
+++ b/demo-project/Source_Map_说明.md
@@ -0,0 +1,222 @@
+# Source Map 配置说明
+
+## ✅ 已完成配置
+
+Demo 项目现在已经配置了完整的 Source Map 支持！
+
+### 📝 配置内容
+
+#### 1. Webpack 配置（`webpack.config.js`）
+
+```javascript
+module.exports = (env, argv) => {
+  const isDevelopment = argv.mode === 'development'
+  
+  return {
+    // Source Map 配置
+    devtool: isDevelopment ? 'eval-source-map' : 'source-map',
+    
+    // CSS/Less Source Map
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [
+            'vue-style-loader',
+            {
+              loader: 'css-loader',
+              options: { sourceMap: isDevelopment }
+            }
+          ]
+        },
+        {
+          test: /\.less$/,
+          use: [
+            'vue-style-loader',
+            {
+              loader: 'css-loader',
+              options: { sourceMap: isDevelopment }
+            },
+            {
+              loader: 'less-loader',
+              options: { sourceMap: isDevelopment }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+```
+
+#### 2. DevServer 配置
+
+```javascript
+devServer: {
+  port: 8080,
+  hot: true,
+  open: true,
+  historyApiFallback: true,
+  // 错误覆盖层
+  client: {
+    overlay: {
+      errors: true,      // 显示错误
+      warnings: false    // 不显示警告
+    }
+  }
+}
+```
+
+### 🎯 Source Map 类型
+
+#### 开发模式：`eval-source-map`
+
+**优点**：
+- ✅ 高质量的源码映射
+- ✅ 包含行和列信息
+- ✅ 重新构建速度快
+- ✅ 适合开发调试
+
+**缺点**：
+- ❌ 生成的文件较大
+- ❌ 不适合生产环境
+
+#### 生产模式：`source-map`
+
+**优点**：
+- ✅ 最高质量的源码映射
+- ✅ 生成独立的 .map 文件
+- ✅ 不影响主文件加载
+
+**缺点**：
+- ❌ 构建速度慢
+- ❌ 文件体积大
+
+### 🔍 调试效果
+
+启动开发服务器后，在浏览器开发者工具中可以看到：
+
+```
+webpack://
+├── demo-project/
+│   └── src/
+│       ├── main.js              ← 可以看到原始源码
+│       ├── App.vue
+│       ├── config/
+│       │   └── index.js
+│       └── views/
+│           └── business/
+│               └── product_list.vue
+│
+└── src/                         ← 框架源码
+    ├── index.js
+    ├── components/
+    │   ├── main/
+    │   └── ...
+    ├── views/
+    │   ├── login/
+    │   ├── home/
+    │   └── ...
+    ├── store/
+    │   ├── user.js
+    │   └── app.js
+    └── utils/
+        ├── http.js
+        ├── tools.js
+        └── uiTool.js
+```
+
+### 💡 使用方法
+
+#### 1. 设置断点
+
+在浏览器开发者工具的 Sources 面板：
+1. 找到要调试的源文件
+2. 点击行号设置断点
+3. 刷新页面触发断点
+
+#### 2. 使用 debugger
+
+在代码中直接添加：
+```javascript
+export default {
+  mounted() {
+    debugger  // ← 程序会在这里暂停
+    console.log('组件已挂载')
+  }
+}
+```
+
+#### 3. Console 调试
+
+```javascript
+// 在 Console 中执行
+$vm.$store.state        // 查看 Vuex 状态
+$vm.$route              // 查看路由信息
+$vm.$root               // 查看根实例
+```
+
+### 📊 对比
+
+| 功能 | 有 Source Map | 无 Source Map |
+|------|--------------|---------------|
+| 看到的代码 | 原始源码 | 编译后的代码 |
+| 断点位置 | 精确到源码行列 | 只能在编译后代码设置 |
+| 变量名 | 原始变量名 | 可能被压缩 |
+| 调试体验 | ⭐⭐⭐⭐⭐ | ⭐⭐ |
+
+### ⚠️ 注意事项
+
+#### 1. 文件大小
+
+开发模式的 bundle 会包含 source map 信息，体积较大：
+- 开发环境：约 3-5 MB（包含 source map）
+- 生产环境：约 500 KB（压缩后，.map 文件独立）
+
+#### 2. 性能影响
+
+- **开发环境**：首次构建较慢，热更新很快
+- **生产环境**：构建时间增加，但运行时无影响
+
+#### 3. 安全性
+
+生产环境的 .map 文件：
+- 不要部署到公开的服务器
+- 或配置服务器禁止访问 .map 文件
+- 或使用错误追踪服务（如 Sentry）管理 source map
+
+### 🚀 快速开始
+
+1. **启动开发服务器**：
+   ```bash
+   npm run dev
+   ```
+
+2. **打开浏览器**：
+   访问 `http://localhost:8080`
+
+3. **打开开发者工具**：
+   按 `F12`
+
+4. **查看源码**：
+   在 Sources 标签页中可以看到完整的源码结构
+
+5. **设置断点调试**：
+   点击行号或在代码中添加 `debugger`
+
+### 📚 相关文档
+
+- **[调试指南.md](./调试指南.md)** - 完整的调试教程
+- **[README.md](./README.md)** - 项目说明
+- **[CHANGELOG.md](./CHANGELOG.md)** - 更新日志
+
+### 🔗 参考资源
+
+- [Webpack DevTool 文档](https://webpack.js.org/configuration/devtool/)
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Vue DevTools](https://devtools.vuejs.org/)
+
+---
+
+**现在你可以愉快地调试代码了！** 🎉
+