zc/admin_core

Fork 0

Files

张成 845658f193 1

2025-10-08 18:53:38 +08:00

4.8 KiB

Raw Blame History

Source Map 配置说明

✅ 已完成配置

Demo 项目现在已经配置了完整的 Source Map 支持！

📝 配置内容

1. Webpack 配置（`webpack.config.js`）

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 配置

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 面板：

找到要调试的源文件
点击行号设置断点
刷新页面触发断点

2. 使用 debugger

在代码中直接添加：

export default {
  mounted() {
    debugger  // ← 程序会在这里暂停
    console.log('组件已挂载')
  }
}

3. Console 调试

// 在 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

🚀 快速开始

启动开发服务器：
```
npm run dev
```
打开浏览器：访问 http://localhost:8080
打开开发者工具：按 F12
查看源码：在 Sources 标签页中可以看到完整的源码结构
设置断点调试：点击行号或在代码中添加 debugger

📚 相关文档

调试指南.md - 完整的调试教程
README.md - 项目说明
CHANGELOG.md - 更新日志

🔗 参考资源

现在你可以愉快地调试代码了！ 🎉

4.8 KiB Raw Blame History Unescape Escape