Vue/UniApp 调试与 Source Map 安全配置指南

🛠️ Vue/UniApp 调试与 Source Map 安全配置指南

本文档涵盖了在 VS Code 中启动 Vue 或 UniApp 项目调试模式的步骤，以及确保 Source Map 仅在开发环境开启的安全配置。

一、配置 Source Map：确保开发启用，生产禁用

为了安全地进行调试，我们必须确保项目生成的 Source Map（源代码映射文件）只在开发环境存在，而在生产打包时被禁用。

1. 针对 Vue CLI (Webpack) 项目

修改根目录下的 vue.config.js 文件：

JavaScript

// vue.config.js

module.exports = {
    // 【✅ 核心安全配置】设置为 false，禁用生产环境的 Source Map 生成。
    productionSourceMap: false, 

    configureWebpack: {
        // 【✅ 开发调试配置】在开发环境开启 Source Map。
        // 'eval-source-map' 速度快，适合开发；'source-map' 最完整，适合发布前检查。
        devtool: process.env.NODE_ENV === 'production' 
            ? false // 生产环境（npm run build）
            : 'source-map' // 开发环境（npm run serve）
    }
};

2. 针对 Vite (Vue 3/UniApp) 项目

修改根目录下的 vite.config.js 文件：

JavaScript

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
    // ... 其他配置 ...
    
    build: {
        // 【✅ 核心安全配置】设置为 false，禁用生产环境的 Source Map 生成。
        // （开发模式下，Vite 默认启用 Source Map）
        sourcemap: false, 
    }
});

---

二、VS Code 调试启动流程

在 VS Code 中启动调试，通常需要先安装相应的调试扩展，并配置 launch.json 文件。

1. 准备工作（安装扩展）

对于 Web/H5 调试，请安装以下任一扩展：

• Debugger for Microsoft Edge
• Debugger for Chrome

2. 配置 launch.json (Vue/UniApp H5)

在项目根目录下的 .vscode/launch.json 文件中添加以下配置：

JSON

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge", // 或 "chrome"
            "request": "launch",
            "name": "Launch Web App Debug",
            "url": "http://localhost:8080", // 🚨 关键：修改为您的项目实际运行的地址和端口
            "webRoot": "${workspaceFolder}/src",
            "sourceMaps": true,
            "breakOnLoad": true
        }
    ]
}

3. 启动调试步骤 (F5)

步骤	操作	说明
1. 启动项目	在终端运行 npm run dev 或 npm run serve。	确保您的应用程序已在配置的端口上运行。
2. 设置断点	在 VS Code 代码文件的行号旁点击，设置 红色圆点。	空心圆点 表示断点未生效，需要启动调试器。
3. 启动调试器	切换到 VS Code 调试视图 (Ctrl+Shift+D)，选择配置，然后点击 绿色播放按钮 (F5)。	VS Code 将连接到或启动浏览器，并在断点处暂停。

---

三、UniApp 小程序环境调试

对于 UniApp 编译的小程序端，推荐使用微信开发者工具自身的调试器，因为它与小程序的运行环境高度集成。

1. 运行 UniApp： 在终端运行 npm run dev:mp-weixin。
2. 打开开发者工具： 导入项目编译后的目录（通常是 dist/dev/mp-weixin）。
3. 设置断点： 在开发者工具的 调试器 -> Sources 面板中，找到您的源代码文件并设置断点。

---

四、核心调试控制操作

程序在断点处暂停后，您可以使用顶部的调试控制栏进行代码步进：

按钮/功能	快捷键	作用
继续 (Continue)	F5	继续执行程序，直到下一个断点或程序结束。
跳过 (Step Over)	F10	执行当前行代码，不进入函数内部。
单步调试 (Step Into)	F11	执行当前行代码，如果当前行是函数调用，则进入函数内部。
跳出 (Step Out)	Shift+F11	快速执行完当前函数剩余代码并跳到调用它的位置。

🔍 观察关键信息

在调试视图的侧边栏，您可以通过以下面板追踪程序状态：

• 变量 (Variables)： 查看当前作用域中所有变量的实时值。
• 监视 (Watch)： 添加您希望持续跟踪的变量或表达式。
• 调用堆栈 (Call Stack)： 查看程序执行到当前位置的函数调用历史。