npm run 调试-Go服务器开发

在 Vue 项目中，npm run 命令通常用于运行项目脚本，调试 Vue 应用可以通过以下几种方式实现：

1. 使用 `npm run serve` / `npm run dev`

这是最常见的调试方式：

npm run serve   # Vue CLI 创建的项目
# 或
npm run dev     # Vite 创建的项目

启动开发服务器（默认 localhost:8080）
支持热重载（代码修改后自动刷新浏览器）
控制台会输出编译错误和警告

2. Chrome DevTools 调试

组件树检查：
- 安装 Vue Devtools 浏览器扩展。
- 在 Chrome DevTools 中查看组件的 props、data、events。
源码断点调试：
- 在浏览器中打开 Sources > webpack:// (或 vite://)。
- 找到 .vue 文件并设置断点。

3. VS Code + Debugger

通过 VS Code 的调试配置：

安装插件：
- Debugger for Chrome
配置 .vscode/launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug Vue App",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src"
        }
    ]
}

启动调试：
- npm run serve
- F5（开始调试）

4. Node.js Inspector（后端联调）

如果涉及 Node.js API：

node --inspect server.js

Chrome访问 chrome://inspect
Attach到Node进程进行后端调试。

5. Env变量控制

在 .env.development中定义环境变量：

VUE_APP_API_URL=http://localhost:3000/api
VUE_APP_DEBUG=true

代码中通过 process.env.VUE_APP_DEBUG读取。

6. Logging & Console

关键位置添加日志：

console.log('Component data:', this.someData);
// Vue3 setup语法:
import { onMounted } from 'vue';
onMounted(() => console.log('Mounted!'));

常见问题排查

问题	解决方案
端口占用	修改端口：`npm run serve -- --port 3000`
HMR不工作	检查网络代理或手动刷新
Proxy跨域失败	配置 `vue.config.js`的 `devServer.proxy`